We Keep Coding

How to pass increase <td id>

I have a table and i am cloning rows to add a new row. My <td id> is also increasing. My problem is though the value of each <td id> is increasing when the value is passing from one screen to the next screen the <td id> will be like this
<flddesc>Val1<flddesc>
<flddesc>Val2<flddesc>
I have tried couple of things but no luck And now i have no idea why is it so. Since i am still learning jQuery and JS so please go easy on me. Any help or suggestion will be appreciated. Thanks
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
var counter = 0;
var quicklink = '';
$(document).on('click', '.Buttons', function(addrow) {
if (counter == '5') {
alert('Maximum limit reached');
return false;
}
var count = $('table tr:last input:text').filter((_, el) => el.value.trim() == "").length;
if (count || !$('.id_100 option[value=description]').attr('selected', 'selected')) {
{
alert("Please fill the current row");
return false;
}
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
$('.DeleteButton').prop('disabled', false);
cindex++;
$clone.find('input:text').val('').attr('disabled', true);
$clone.find('input:button').attr('disabled', true);
$clone.attr('id', 'id' + (cindex)); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if (id != "") {
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = this.name + (cindex);
}
}
});
$tr.after($clone);
counter++;
});
function disableField(e)
{ var Count = $('#dataTable tr').length;
if (Count == 2){
$(e).closest('tr').find("input").not('.DeleteButton').prop('disabled', false);
}else{
$(e).closest('tr').find("input").prop('disabled', false);
}}
$(document).on("click", '.DeleteButton', function() {
$(this).closest("tr").remove();
counter--;
var Count1 = $('#dataTable tr').length;
if (Count1 == 2){
$('.DeleteButton').prop('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id0" class="vals" name="id0">
<td>
<div class="id_100">
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)">
<option value="">Select</option>
<option value="L">Latest Offer</option>
<option value="G">Guides</option>
</select>
</div>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="45" value="" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="" />
</td>
<td>
<input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
<li><input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onclick="return fnOnSubmit();"/></li>
</ul>
</div>

How can I highlight the table column?

In my table I have STUDENTID, FULLNAME, SEX, COURSE & SUBJECT. I used combobox to search for all the 'Male' or 'Female' in my table. For example, I choose 'Male' I want all the Male column or cell will be highlighted with any colors. Only the 'SEX' column will be highlighted. How can I do it on javascript?
function searchForSex() {
var input, filter, table, tr, td, i;
input = document.getElementById("txtSearch");
filter = input.value.toUpperCase();
table = document.getElementById("tblStudent");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.backgroundColor = "red";
}
}
}
}
Search:
<select id="txtSearch"><br><br>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br><br>
<button onclick="searchForSex()">Search</button><br><br> ID:
<br>
<input type="text" id="txtProdName"><br><br> FULL Name:<br>
<input type="text" id="txtProdName"><br><br> SEX:
<br>
<select id="cboSex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br><br> COURSE:
<br>
<input type="text" id="txtCourse"><br><br> SUBJECT:
<br>
<input type="text" id="txtSubject"><br><br>
<button onclick="insertValueTable()">Save</button>
<button>Cancel</button>
<br><br>
<table border="1px">
<th>ID</th>
<th>FULL NAME</th>
<th>SEX</th>
<th>COURSE</th>
<th>SUBJECT</th>
<tbody id="tblStudent">
</tbody>
</table>

You could do it like this for example.
And on another note: searchForSex is a pretty interesting function name.
function searchForSex() {
var input, filter, table, tr, i;
input = document.getElementById("txtSearch");
filter = input.value.toUpperCase();
table = document.getElementById("tblStudent");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
let tds = tr[i].getElementsByTagName("td");
let sextd = tds[2];
if (sextd) {
sextd.style.backgroundColor = ""; // Reset color when re-searching
if (sextd.innerHTML.toUpperCase() === filter){
sextd.style.backgroundColor = "green";
}
}
}
}
Search:
<select id="txtSearch"><br><br>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br><br>
<button onclick="searchForSex()">Search</button><br><br> ID:
<br>
<input type="text" id="txtProdName"><br><br> FULL Name:<br>
<input type="text" id="txtProdName"><br><br> SEX:
<br>
<select id="cboSex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br><br> COURSE:
<br>
<input type="text" id="txtCourse"><br><br> SUBJECT:
<br>
<input type="text" id="txtSubject"><br><br>
<button onclick="insertValueTable()">Save</button>
<button>Cancel</button>
<br><br>
<table border="1px">
<th>ID</th>
<th>FULL NAME</th>
<th>SEX</th>
<th>COURSE</th>
<th>SUBJECT</th>
<tbody id="tblStudent">
<tr>
<td>1</td>
<td>Pat Johnsson</td>
<td>Male</td>
<td>Subject 1</td>
</tr>
<tr>
<td>2</td>
<td>Molly McGill</td>
<td>Female</td>
<td>Subject 2</td>
</tr>
</tbody>
</table>

Here's a much simpler solution:
var input;
var tableTD = document.body.querySelectorAll("#tblStudent td");
function searchForSex() {
input = document.body.querySelector("#txtSearch").value;
for (var tableCell of tableTD){
tableCell.style.backgroundColor = "transparent";
if(tableCell.innerHTML == input){
tableCell.style.backgroundColor = "red";
}
}
}

Suming up dynamic table last column javascript

Please someone should help out on this, everything seems to be working fine but the sumQTY() function is where am having problem with, its iterating through the row cells but just not identifing the input box. Thanks
Bellow is the script.'
How do i get the sumQTY() to work well.
<SCRIPT language="javascript">
function addRow(dataTable) {
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if (rowCount < 4) { // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
row.id = 'row_'+rowCount;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.outerHTML = table.rows[1].cells[i].outerHTML;
}
var listitems= row.getElementsByTagName("input")
for (i=0; i<listitems.length; i++) {
listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
}
} else {
alert("Maximum Row Reached.");
}
}
function deleteRow(dataTable) {
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for (var i = 1; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null !== chkbox && true === chkbox.checked) {
if (rowCount <= 2) { // limit the user from removing all the fields
alert("Cannot Remove all the Rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
function calculate(elementID) {
var mainRow = document.getElementById(elementID);
var myBox1 = mainRow.querySelectorAll('[id=item')[0].value;
var myBox2 = mainRow.querySelectorAll('[id=price')[0].value;
var total = mainRow.querySelectorAll('[id=qty')[0];
var myResult1 = myBox1 * (parseFloat(myBox2)) ;
var mresult = myResult1.toFixed(2);
total.value = mresult;
}
function sumQty(dataTable) {
var total = 0;
var confirm = 10;
var colCount;
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for (var i = 1; i < rowCount; i++) {
var row = table.rows[i];
colCount = row.cells.length;
for (var j = 0; j < colCount; j++) {
var node = row.cells[j].childNodes[0];
if (node.name == "qty[]") {
total += parseInt(node.value);
confirm = confirm + 1;
}else{confirm = confirm - 1;}
}
}
//alert("total = " + total + " " + rowCount + " " + colCount + " " + confirm);
//document.getElementById("mee").innerHTML = "Sum Value = " + total;
//console.log(sumVal);
return total;
}
</SCRIPT>
Bellow is the html table code
<form action="" method="post" name="f">
<table id="dataTable" class="form">
<thead>
<th style="width:20px"></th>
<th>Item</th>
<th>Description</th>
<th>Unit Price</th>
<th>Item Units</th>
<th>Total Price (#)</th>
</thead>
<tbody>
<tr id='row_0'>
<td><input style="width:20px" type="checkbox" name="chkbox[]" /></td>
<td>
<input type="text" required="required" name="ite[]" onChange="search('row_1')" id="ite" placeholder="Item">
</td>
<td>
<input type="text" required="required" class="small" name="price[]" id="des" placeholder="Description">
</td>
<td>
<input type="text" required="required" name="item[]" oninput="calculate('row_0')" onchange="sumQty()" id="item" placeholder="unit price">
</td>
<td>
<input type="text" required="required" class="small" name="price[]" oninput="calculate('row_0')" id="price" placeholder="units">
</td>
<td>
<input type="text" required="required" class="small" name="qty[]" id="qty" placeholder="total price">
</td>
</tr>
</tbody>
</table>
<span id="mee"></span>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<INPUT type="submit" value="Insert" name="submit" />
<input type="text" required="required" class="small" name="sumtotal" placeholder="total price"/>
</form>
I want to output the total sum of the last col in the input field with name="sumtotal".
Thanks.

You will have to work a bit more on when the sumQTy is being called, since when it gets called the row price = NaN since there is no given a quantity, you can overwrite that behavior by making a small change in the calculate function or having a starter value o "1" in the qty.
This are the changes I made it to have it working:
In your HTML
<input type="text" required="required" class="small" name="price[]" oninput="calculate('row_0')" id="price" placeholder="units" value="1">
In calculate function
var multiplier = Number(myBox2) || 1;
var myResult1 = myBox1 * multiplier;
Better implementation of sumQty
function sumQty(dataTable) {
var confirm = 10;
var colCount;
var table = document.getElementById("dataTable");
let rows = [...table.querySelectorAll('[name*=qty]')];
let total = rows.reduce((prev, current)=>{
let to_be_added = Number(current.value) || 0;
return prev + to_be_added;
},0)
return total;
}

<SCRIPT language="javascript">
function addRow(dataTable) {
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if (rowCount < 4) { // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
row.id = 'row_'+rowCount;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.outerHTML = table.rows[1].cells[i].outerHTML;
}
var listitems= row.getElementsByTagName("input")
for (i=0; i<listitems.length; i++) {
listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
}
} else {
alert("Maximum Row Reached.");
}
}
function deleteRow(dataTable) {
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for (var i = 1; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null !== chkbox && true === chkbox.checked) {
if (rowCount <= 2) { // limit the user from removing all the fields
alert("Cannot Remove all the Rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
function calculate(elementID) {
var mainRow = document.getElementById(elementID);
var myBox1 = mainRow.querySelectorAll('[id=item')[0].value;
var myBox2 = mainRow.querySelectorAll('[id=price')[0].value;
var total = mainRow.querySelectorAll('[id=qty')[0];
var multiplier = Number(myBox2) || 1;
var myResult1 = myBox1 * multiplier;
//var myResult1 = myBox1 * (parseFloat(myBox2)) ;
var mresult = myResult1.toFixed(2);
total.value = mresult;
//function sumQty(dataTable) {
var confirm = 10;
var colCount;
var table = document.getElementById("dataTable");
let rows = [...table.querySelectorAll('[name*=qty]')];
let total2 = rows.reduce((prev, current)=>{
let to_be_added = Number(current.value) || 0;
return prev + to_be_added;
},0)
console.log(total2);
$("#sumtotal").val(total2.toFixed(2));
return total2;
}
function amountDue() {
var amount = parseFloat($("#sumtotal").val());
var paidd = parseFloat($("#paid").val());
var balance = amount - paidd;
$("#due").val(balance.toFixed(2));
$("#due2").val(balance.toFixed(2));
}
html code!
<form action="" method="post">
<article>
<div>
<address>
<p>Customer ID=<br>Staff ID= <?php echo $_SESSION['staffid']?></p>
</address>
<table class="meta">
<tr>
<th><span>invoice #</span></th>
<td><input type="text" name="ind"/></td>
</tr>
<tr>
<th><span>Amount Due</span></th>
<td><input type="text" required="required" class="small" name="" id="due2" placeholder="#" readonly="readonly" style="background-color: white" /></td>
</tr>
</table>
</div>
</article>
<article>
<table id="dataTable" class="form">
<thead>
<th style="width:20px"></th>
<th>Item</th>
<th>Description</th>
<th>Unit Price</th>
<th>Item Units</th>
<th>Sub Total (#)</th>
</thead>
<tbody>
<tr id='row_0'>
<td><input style="width:20px" type="checkbox" name="chkbox[]" /></td>
<td>
<select required="required" name="" onChange="" id="" placeholder="Item">
<option value="0"> select an item</option>
<option value="1"></option>
<option value="2"></option>
</select>
</td>
<td>
<input type="text" required="required" class="small" name="" id="" placeholder="Description">
</td>
<td>
<input type="text" required="required" name="item[]" oninput="calculate('row_0')" id="item" placeholder="unit price">
</td>
<td>
<input type="text" required="required" class="small" name="price[]" oninput="calculate('row_0')" id="price" placeholder="units" value="1">
</td>
<td>
<input type="text" required="required" class="small" name="qty[]" id="qty" placeholder="sub total" readonly="readonly" style="background-color: white">
</td>
</tr>
</tbody>
</table>
<span id="mee"></span>
<input type="button" value="Add" onClick="addRow('dataTable')" class="butto" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" class="butto"/>
<table class="balance" id="datatable2">
<tr>
<th><span>Total</span></th>
<td><input type="text" required="required" class="small" name="tot" id="sumtotal" placeholder="total price" readonly="readonly" style="background-color: white"/></td>
</tr>
<tr>
<th><span>Amount Paid</span></th>
<td><input type="text" required="required" class="small" name="" id="paid" placeholder="#" oninput="amountDue()"></td>
</tr>
<tr>
<th><span>Balance Due</span></th>
<td><input type="text" required="required" class="small" name="" id="due" placeholder="#" readonly="readonly" style="background-color: white"></td>
</tr>
</table>
</article>
<aside><center>
<h1><span>Additional Notes</span></h1>
</center>
<div contenteditable>
<p>Enter additional info here</p>
</div>
</aside>
</ul>
<ul id="core" class="hide" style="overflow-x:auto; overflow-y:auto;">
</ul>
<ul id="jquerytuts" class="hide" style="overflow-x:auto; overflow-y:auto;">
</ul>
<ul id="classics" class="hide">
</ul>
</div> <!-- END List Wrap -->
<center>
<div class="input-container">
<INPUT type="submit" value="Insert" name="submit" class="butto" style="width:100%"/>
</div>
</form>

how can i get the total of all dynamically calculated subtotals

I want all my grand totals to be summed up at the end i.e..total amount to be displayed
I've coded using handlebars.js as
<input type="button" value="Add Product" onClick="addRow('dataTable')" />
<table id="dataTable" class="form" border="0">
<tbody>
<tr id='row_0'>
<p>
<td>
<label>productcode</label>
<input type="text" required="required" name="pcode" size="10px" >
</td>
<td>
<label>productname</label>
<input type="text" required="required" name="name" size="10px">
</td>
<td>
<label>Quantity</label>
<input type="text" required="required" name="qty" oninput="calculate('row_0')" size="10px">
</td>
<td>
<label for="price">Price</label>
<input type="text" required="required" class="small" name="price" oninput="calculate('row_0')" size="10px">
</td>
<td>
<label for="total">Total</label>
<input type="text" required="required" class="small" name="total" size="10px">
</td>
<td>
<label>tax</label>
<input type="text" required="required" name="tax" oninput="calculate('row_0')" size="10px">
</td>
<td>
<label>discount</label>
<input type="text" required="required" name="discount" oninput="calculate('row_0')" size="10px">
</td>
<td>
<label>grand total</label>
<input type="text" required="required" name="gtotal" class="small" size="10px" >
</td>
<tr>
<table class="table invoice-table text-right">
<td style="border-top: none;"> Total Amount</td>
<td style="border-top: none;"><strong class="total- price">£0</strong></td>
</tr>
</table>
</p>
</tr>
</tbody>
</table>
</html>
JS code:
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 200) { // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
row.id = 'row_'+rowCount;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.outerHTML = table.rows[0].cells[i].outerHTML;
}
var listitems= row.getElementsByTagName("input")
for (i=0; i<listitems.length; i++) {
listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
}
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null !== chkbox && true === chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
function calculate(elementID) {
var mainRow = document.getElementById(elementID);
var quantity = mainRow.querySelectorAll('[name=qty]')[0].value;
var price = mainRow.querySelectorAll('[name=price]')[0].value;
var total = mainRow.querySelectorAll('[name=total]')[0];
var myResult1 = quantity * price;
total.value = myResult1;
var tax = mainRow.querySelectorAll('[name=tax]')[0].value;
var discount = mainRow.querySelectorAll('[name=discount]')[0].value;
var gtotal = mainRow.querySelectorAll('[name=gtotal]')[0];
var myResult2 = ((price*quantity*tax*0.01)-(price*quantity*discount*0.01))+(price*quantity);
gtotal.value = myResult2;
}
</script>
now the grand total should be automatically summed and displayed at total amount

add multiple row dynamically

This is example of my code..
from the example, I've got two rows..
What I want to do is, I want to add the two rows dynamically..
thank you
<table id="datatable">
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
</table>
<button type="button" id="add" onclick="addRow('dataTable')">
<b>Add</b>
</button>
function addRow(tableID) {
alert('ttt');
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
jsfiddle example

Try this:
HTML
<table id="datatable">
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
</table>
<button type="button" id="add" onclick="addRow('dataTable')">
<b>Add</b>
</button>
JS
$(document).ready(function() {
$('#add').click(function(){
$('#datatable').append(' <tr> <td>Account No</td> <td>:</td> <td colspan="2"><input size="20" type="text" /></td> <td>Bill No</td> <td>:</td> <td><input type="text" /></td> </tr> <tr> <td>Name</td> <td>:</td> <td colspan="2"><input type="text" /></td> <td>Bill date</td> <td>:</td> <td><input type="text" /></td> </tr>');
});
});
Fiddle: http://jsfiddle.net/zLXmQ/4/

Just browsing through and would like to point out that your table id- is datatable and your parameter is dataTable. hopefully thats pertinent

simply you can do this :
function addRow(tableId)
{
$('#' + tableId + ' tr:last').after('<tr><td>Enter You New Row Data Here..</td></tr>');
}
for more information check this : Add table row in jQuery