Loop through all cells in all rows in a table - javascript

I'm trying to loop through all the <td> in each <tr> in this table in order to assign a value to each <td>.
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
<td><input type="text" id="10" /></td>
<td><input type="text" id="11" /></td>
<td><input type="text" id="12" /></td>
<td><input type="text" id="13" /></td>
<td><input type="text" id="14" /></td>
<td><input type="text" id="15" /></td>
<td><input type="text" id="16" /></td>
<td><input type="text" id="17" /></td>
<td><input type="text" id="18" /></td>
</tr>
<tr>
<td><input type="text" id="19" /></td>
<td><input type="text" id="20" /></td>
<td><input type="text" id="21" /></td>
<td><input type="text" id="22" /></td>
<td><input type="text" id="23" /></td>
<td><input type="text" id="24" /></td>
<td><input type="text" id="25" /></td>
<td><input type="text" id="26" /></td>
<td><input type="text" id="27" /></td>
</tr>
<tr>
<td><input type="text" id="28" /></td>
<td><input type="text" id="29" /></td>
<td><input type="text" id="30" /></td>
<td><input type="text" id="31" /></td>
<td><input type="text" id="32" /></td>
<td><input type="text" id="33" /></td>
<td><input type="text" id="34" /></td>
<td><input type="text" id="35" /></td>
<td><input type="text" id="36" /></td>
</tr>
<tr>
<td><input type="text" id="37" /></td>
<td><input type="text" id="38" /></td>
<td><input type="text" id="39" /></td>
<td><input type="text" id="40" /></td>
<td><input type="text" id="41" /></td>
<td><input type="text" id="42" /></td>
<td><input type="text" id="43" /></td>
<td><input type="text" id="44" /></td>
<td><input type="text" id="45" /></td>
</tr>
<tr>
<td><input type="text" id="46" /></td>
<td><input type="text" id="47" /></td>
<td><input type="text" id="48" /></td>
<td><input type="text" id="49" /></td>
<td><input type="text" id="50" /></td>
<td><input type="text" id="51" /></td>
<td><input type="text" id="52" /></td>
<td><input type="text" id="53" /></td>
<td><input type="text" id="54" /></td>
</tr>
<tr>
<td><input type="text" id="55" /></td>
<td><input type="text" id="56" /></td>
<td><input type="text" id="57" /></td>
<td><input type="text" id="58" /></td>
<td><input type="text" id="59" /></td>
<td><input type="text" id="60" /></td>
<td><input type="text" id="61" /></td>
<td><input type="text" id="62" /></td>
<td><input type="text" id="63" /></td>
</tr>
<tr>
<td><input type="text" id="64" /></td>
<td><input type="text" id="65" /></td>
<td><input type="text" id="66" /></td>
<td><input type="text" id="67" /></td>
<td><input type="text" id="68" /></td>
<td><input type="text" id="69" /></td>
<td><input type="text" id="70" /></td>
<td><input type="text" id="71" /></td>
<td><input type="text" id="72" /></td>
</tr>
<tr>
<td><input type="text" id="73" /></td>
<td><input type="text" id="74" /></td>
<td><input type="text" id="75" /></td>
<td><input type="text" id="76" /></td>
<td><input type="text" id="77" /></td>
<td><input type="text" id="78" /></td>
<td><input type="text" id="79" /></td>
<td><input type="text" id="80" /></td>
<td><input type="text" id="81" /></td>
</tr>
</table>
So far I've tried this:
const grid = document.getElementById("grid");
const row = grid.getElementsByTagName('tr');
const cell = row.getElementsByTagName('td');
for(row in grid) {
for(cell in row) {
cell.textContent = "1";
}
}
But it errors with TypeError: row.getElementsByTagName is not a function.
How can I fix this?


You can use document.querySelectorAll('td') to get all of your cells and then you can loop through it by using forEach for example.
// looping through the inputs inside the cells
// to demonstrate that it works I log the id of the input field
document.querySelectorAll('td > input').forEach((x) => {
console.log(x.id)
})
// here looping through the cells
document.querySelectorAll('td').forEach((x) => {
console.log(x)
})
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
<td><input type="text" id="10" /></td>
<td><input type="text" id="11" /></td>
<td><input type="text" id="12" /></td>
<td><input type="text" id="13" /></td>
<td><input type="text" id="14" /></td>
<td><input type="text" id="15" /></td>
<td><input type="text" id="16" /></td>
<td><input type="text" id="17" /></td>
<td><input type="text" id="18" /></td>
</tr>
<tr>
<td><input type="text" id="19" /></td>
<td><input type="text" id="20" /></td>
<td><input type="text" id="21" /></td>
<td><input type="text" id="22" /></td>
<td><input type="text" id="23" /></td>
<td><input type="text" id="24" /></td>
<td><input type="text" id="25" /></td>
<td><input type="text" id="26" /></td>
<td><input type="text" id="27" /></td>
</tr>
<tr>
<td><input type="text" id="28" /></td>
<td><input type="text" id="29" /></td>
<td><input type="text" id="30" /></td>
<td><input type="text" id="31" /></td>
<td><input type="text" id="32" /></td>
<td><input type="text" id="33" /></td>
<td><input type="text" id="34" /></td>
<td><input type="text" id="35" /></td>
<td><input type="text" id="36" /></td>
</tr>
<tr>
<td><input type="text" id="37" /></td>
<td><input type="text" id="38" /></td>
<td><input type="text" id="39" /></td>
<td><input type="text" id="40" /></td>
<td><input type="text" id="41" /></td>
<td><input type="text" id="42" /></td>
<td><input type="text" id="43" /></td>
<td><input type="text" id="44" /></td>
<td><input type="text" id="45" /></td>
</tr>
<tr>
<td><input type="text" id="46" /></td>
<td><input type="text" id="47" /></td>
<td><input type="text" id="48" /></td>
<td><input type="text" id="49" /></td>
<td><input type="text" id="50" /></td>
<td><input type="text" id="51" /></td>
<td><input type="text" id="52" /></td>
<td><input type="text" id="53" /></td>
<td><input type="text" id="54" /></td>
</tr>
<tr>
<td><input type="text" id="55" /></td>
<td><input type="text" id="56" /></td>
<td><input type="text" id="57" /></td>
<td><input type="text" id="58" /></td>
<td><input type="text" id="59" /></td>
<td><input type="text" id="60" /></td>
<td><input type="text" id="61" /></td>
<td><input type="text" id="62" /></td>
<td><input type="text" id="63" /></td>
</tr>
<tr>
<td><input type="text" id="64" /></td>
<td><input type="text" id="65" /></td>
<td><input type="text" id="66" /></td>
<td><input type="text" id="67" /></td>
<td><input type="text" id="68" /></td>
<td><input type="text" id="69" /></td>
<td><input type="text" id="70" /></td>
<td><input type="text" id="71" /></td>
<td><input type="text" id="72" /></td>
</tr>
<tr>
<td><input type="text" id="73" /></td>
<td><input type="text" id="74" /></td>
<td><input type="text" id="75" /></td>
<td><input type="text" id="76" /></td>
<td><input type="text" id="77" /></td>
<td><input type="text" id="78" /></td>
<td><input type="text" id="79" /></td>
<td><input type="text" id="80" /></td>
<td><input type="text" id="81" /></td>
</tr>
</table>

Related

How to change grand total only for one table

i really have no idea right now on how to only calculate first table grand total using one script of jquery/javascript
based code from : https://www.dotnetcurry.com/jquery/1189/jquery-table-calculate-sum-all-rows
here the code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Performing Calculations in a Table</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
var $tblrows = $("#tblProducts tbody tr");
$tblrows.each(function(index) {
var $tblrow = $(this);
$tblrow.find('.qty').on('change', function() {
var qty = $tblrow.find("[name=qty]").val();
var price = $tblrow.find("[name=price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$tblrow.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
$(".subtot").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('.grdtot').val(grandTotal.toFixed(2));
}
});
});
});
</script>
</head>
<body>
<table id="tblProducts">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="220" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="18.32" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="29" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="19.99" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table><br><br>
<table id="tblProducts2">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="220" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="18.32" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="29" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="19.99" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table>
</body>
</html>
When i change the value in table tblProducts it calculate grand total of two table, how to separate the grand total for each table.
Sorry to ask, i really have no idea

You need to only select the .subtot input inside the current table you're in before updating it. Try this.
$(function () {
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
$('table').each(function(){
var $tbl = $(this);
var $tblrows = $tbl.find('tbody tr');
$tblrows.each(function (index) {
var $tblrow = $(this);
$tblrow.find('.qty').on('change', function () {
var qty = $tblrow.find("[name=qty]").val();
var price = $tblrow.find("[name=price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$tblrow.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
$tbl.find(".subtot").each(function () {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$tbl.find('.grdtot').val(grandTotal.toFixed(2));
}
});
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Performing Calculations in a Table</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<table id="tblProducts">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="220" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="18.32" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="29" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="19.99" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name=""/></td>
</tr>
</tfoot>
</table><br><br>
<table id="tblProducts2">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="220" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="18.32" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="29" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="19.99" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name=""/></td>
</tr>
</tfoot>
</table>

In your jquery selectors just add your table id, and if you have multiple tables you can wrap the code in a function
function addTotal(tableID) {
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
var $tblrows = $(tableID + " tbody tr");
$tblrows.each(function(index) {
var $tblrow = $(this);
$tblrow.find( '.qty').on('change', function() {
var qty = $tblrow.find("[name=qty]").val();
var price = $tblrow.find("[name=price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$tblrow.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
$(tableID + " .subtot").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$(tableID + ' .grdtot').val(grandTotal.toFixed(2));
}
});
});
}
addTotal("#tblProducts");

You really don't need to loop over the rows to add the event listener.
You can use closest() within the handler function to isolate the row and table the element is in then use find()
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
$('.qty').on('change', function() {
var $row = $(this).closest('tr'),
qty = $(this).val(),
price = $row.find(".price").val(),
subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$row.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
var $table = $row.closest('table')
$table.find(".subtot").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$table.find('.grdtot').val(grandTotal.toFixed(2));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblProducts">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="220" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="18.32" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="29" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="19.99" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table><br><br>
<table id="tblProducts2">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="220" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="18.32" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="29" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="19.99" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table>

EDGE laggy in showing keyboard input

The code below, when executed by edge shows a lot of input lag.
Steps to reproduce:
copy paste the snippit in a local html file.
It will not be reproducable from the snippit editor in stackoverflow.
open it with edge
make sure auto fill form fields are ON in edge settings/advanced . there is no need to actually have these form fields
slam your keyboard with random keys (more than 10 keys/sec)
it's a bit rude but necessary to demonstrate. On a production page where there is css, normal typing is enough to see the issue.
Not sure if it matters, Version where this issue works
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134
You will see the input still being filled in even if you already stopped slamming the keyboard.
Workaround found but not acceptible for our situation
Disable "save form entries" option in edge. (not acceptable as we cannot force all our users to do this)
remove form element (obviously not acceptable)
<html>
<head>
</head>
<body>
<form method="post">
<div>
<div>
<table>
<tr>
<td><input class="decimal" id="OrderLines_0__AmountExcl" name="OrderLines[0].AmountExcl" type="text" value="45,00" /></td>
<td><input class="decimal" id="OrderLines_0__VAT" name="OrderLines[0].VAT" type="text" value="21,00" /></td>
<td><input class="decimal" id="OrderLines_0__Quantity" name="OrderLines[0].Quantity" type="text" value="1,00" /></td>
<td><input id="OrderLines_0__Unit" name="OrderLines[0].Unit" type="text" value="" /></td>
<td><input id="OrderLines_0__ReductionPercentage" name="OrderLines[0].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_1__AmountExcl" name="OrderLines[1].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_1__VAT" name="OrderLines[1].VAT" type="text" value="" /></td>
<td><input id="OrderLines_1__Quantity" name="OrderLines[1].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_1__Unit" name="OrderLines[1].Unit" type="text" value="" /></td>
<td><input id="OrderLines_1__ReductionPercentage" name="OrderLines[1].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_2__AmountExcl" name="OrderLines[2].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_2__VAT" name="OrderLines[2].VAT" type="text" value="" /></td>
<td><input id="OrderLines_2__Quantity" name="OrderLines[2].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_2__Unit" name="OrderLines[2].Unit" type="text" value="" /></td>
<td><input id="OrderLines_2__ReductionPercentage" name="OrderLines[2].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_3__AmountExcl" name="OrderLines[3].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_3__VAT" name="OrderLines[3].VAT" type="text" value="" /></td>
<td><input id="OrderLines_3__Quantity" name="OrderLines[3].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_3__Unit" name="OrderLines[3].Unit" type="text" value="" /></td>
<td><input id="OrderLines_3__ReductionPercentage" name="OrderLines[3].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_4__AmountExcl" name="OrderLines[4].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_4__VAT" name="OrderLines[4].VAT" type="text" value="" /></td>
<td><input id="OrderLines_4__Quantity" name="OrderLines[4].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_4__Unit" name="OrderLines[4].Unit" type="text" value="" /></td>
<td><input id="OrderLines_4__ReductionPercentage" name="OrderLines[4].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_5__AmountExcl" name="OrderLines[5].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_5__VAT" name="OrderLines[5].VAT" type="text" value="" /></td>
<td><input id="OrderLines_5__Quantity" name="OrderLines[5].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_5__Unit" name="OrderLines[5].Unit" type="text" value="" /></td>
<td><input id="OrderLines_5__ReductionPercentage" name="OrderLines[5].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_6__AmountExcl" name="OrderLines[6].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_6__VAT" name="OrderLines[6].VAT" type="text" value="" /></td>
<td><input id="OrderLines_6__Quantity" name="OrderLines[6].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_6__Unit" name="OrderLines[6].Unit" type="text" value="" /></td>
<td><input id="OrderLines_6__ReductionPercentage" name="OrderLines[6].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_7__AmountExcl" name="OrderLines[7].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_7__VAT" name="OrderLines[7].VAT" type="text" value="" /></td>
<td><input id="OrderLines_7__Quantity" name="OrderLines[7].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_7__Unit" name="OrderLines[7].Unit" type="text" value="" /></td>
<td><input id="OrderLines_7__ReductionPercentage" name="OrderLines[7].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_8__AmountExcl" name="OrderLines[8].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_8__VAT" name="OrderLines[8].VAT" type="text" value="" /></td>
<td><input id="OrderLines_8__Quantity" name="OrderLines[8].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_8__Unit" name="OrderLines[8].Unit" type="text" value="" /></td>
<td><input id="OrderLines_8__ReductionPercentage" name="OrderLines[8].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_9__AmountExcl" name="OrderLines[9].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_9__VAT" name="OrderLines[9].VAT" type="text" value="" /></td>
<td><input id="OrderLines_9__Quantity" name="OrderLines[9].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_9__Unit" name="OrderLines[9].Unit" type="text" value="" /></td>
<td><input id="OrderLines_9__ReductionPercentage" name="OrderLines[9].ReductionPercentage" type="text" value="" /></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Edge performance profiler shows big delays on the input event
And pins it to the AutoFormFill extension which is by default enabled in Edge
Detailed overview getFormIdentifier
Detailed overview Isimple iloop

Update total in table row with jquery

I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.

You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo

Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here

Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);

Could Not Jquery field in Php

I create a add item page where i implement autucomplete textbox and auto multiplication using jquery.
when i use autucomplete textbox multiplication cannot work.
My Jquery Code is....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
$(".product").autocomplete("autocomplete1.php", {
selectFirst: true
});
$(".brand").autocomplete("autocomplete2.php", {
selectFirst: true
});
$(".model").autocomplete("autocomplete3.php", {
selectFirst: true
});
});
</script>-->
<script type="text/javascript">
$(document).ready(function() {
$(".product").autocomplete("autocomplete1.php", {
selectFirst: true
});
$(".brand").autocomplete("autocomplete2.php", {
selectFirst: true
});
$(".model").autocomplete("autocomplete3.php", {
selectFirst: true
});
$('#dataTable').on('keyup', '.price', calTotal)
.on('keyup', '.quantity', calTotal);
// find the value and calculate it
function calTotal() {
var $row = $(this).closest('tr'),
price = $row.find('.price').val(),
quantity = $row.find('.quantity').val(),
total = price * quantity;
// change the value in total
$row.find('.txt').val(total)
}
});
</script>
My html code is...
<TABLE id="dataTable" class="dataTable" width="350px" border="1">
<tr> <th></th>
<th width="144"><div align="center"><strong>Product Name</strong></div></th>
<th width="146"><div align="center"><strong>Brand Name</strong></div></th>
<th width="146"><div align="center"><strong>Model No</strong></div></th>
<th width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></th>
<th width="146"><div align="center"><strong>Quantity (Q)</strong></div></th>
<th width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</th>
<th width="153"><div align="center"><strong>Description</strong></div></th>
</tr>
<tbody>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model"/></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand"/></td>
<td><input type="text" name="model[]" id="model" class="model"/></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
</tbody>
</TABLE>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
<table width="1206" border="0">
<tr>
<td width="753"> </td>
<td width="124"><input name="btn" type="button" id="btn" value="Grand Total"/></td>
<td width="315"><input type="text" id="sum" name="sum" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<!--<td colspan="2">Transport Price:
<input type="text" name="transport" id="transport" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Grand Total:
<input type="text" name="grandt" id="grandt" /></td>
</tr>-->
</table>
How can i do it
Please help!!

If you're using a textbox and want to see if the input is changed, use:
$('#your-text-box').on('input', function() {
//Do your calculation
//Show it in your other textbox perhaps?
}

jquery function to find an entered value is text or number and pop error?

<SCRIPT>
$(document).ready(function(){
$(document).each(function(){
var tc = document.getElementsByClassName('tc')[0].value;
var ac = document.getElementsByClassName('ac')[0].value;
$('.ac').change(function(){
if ($('.ac').val() > $('.tc').val()){
alert(" ERROR !!! \n\n The attended classes are more than total classes");}
});
});
});
$(document).ready(function(){
$(document).each(function(){
var re = new RegExp("[0-9]");
$('.tc').change(function(){
if ($('.tc').val().match(re)) { // DO NOTHING}
else {
alert(" Please enter only numbers ");
}
});
});
});
</script>
The above function works once or may not at all
if once the value is correct and next the value
is not a number means it doest alert at all
is there something missing or wrong about the
code i have written?????
<table width="928" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="126">MONTH</th>
<th colspan="2"><div align="center">Dec</div></th>
<th colspan="2"><div align="center">Jan</div></th>
<th colspan="2"><div align="center">Feb</div></th>
<th colspan="2"><div align="center">Mar</div></th>
<th colspan="2"><div align="center">Apr</div></th>
<th colspan="2"><div align="center">May</div></th>
<th colspan="2"><div align="center">Jun</div></th>
<th colspan="3"><div align="center">I A</div></th>
</tr>
<tr>
<th><div align="center">DETAILS</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="64"><div align="center">T1</div></th>
<th width="64"><div align="center">T2</div></th>
<th width="72"><div align="center">T3</div></th>
</tr>
<tr>
<th>Subject-1</th>
<td><input name="dec_tc_s1" type="text" class="tc" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="may_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="may_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="s1_t1" value="" size="5" /></td>
<td><input type="text" name="s1_t2" value="" size="5" /></td>
<td><input type="text" name="s1_t3" value="" size="5" /></td>
</tr>
<tr>
<th>Subject-2 </th>
<td><input type="text" name="dec_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="may_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="may_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="s2_t1" value="" size="5" /></td>
<td><input type="text" name="s2_t2" value="" size="5" /></td>
<td><input type="text" name="s2_t3" value="" size="5" /></td>
</tr>
<tr>
<th>Subject-3 </th>
<td><input type="text" name="dec_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="dec_ac_s3" class="ac"value="" size="3" /></td>
<td><input type="text" name="jan_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="jan_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="feb_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="mar_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s3" class="tc" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="may_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="may_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s3" class="tc" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="s3_t1" value="" size="5" /></td>
<td><input type="text" name="s3_t2" value="" size="5" /></td>
<td><input type="text" name="s3_t3" value="" size="5" /></td>
</tr>
<tr>
<th>Subject-4 </th>
<td><input type="text" name="dec_tc_s4" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s4" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s4" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s4" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s4" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s4" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s4" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s4" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s4" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s4" value="" size="3" /></td>
<td><input type="text" name="may_tc_s4" value="" size="3" /></td>
<td><input type="text" name="may_ac_s4" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s4" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s4" value="" size="3" /></td>
<td><input type="text" name="s4_t1" value="" size="5" /></td>
<td><input type="text" name="s4_t2" value="" size="5" /></td>
<td><input type="text" name="s4_t3" value="" size="5" /></td>
</tr>
<tr>
<th colspan="15"><div align="center">Practicals</div></th>
<th><div align="center">T1</div></th>
<th><div align="center">T2</div></th>
<th><div align="center">REC</div></th>
</tr>
<tr>
<th>Subject-5 </th>
<td><input type="text" name="dec_tc_s5" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s5" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s5" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s5" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s5" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s5" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s5" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s5" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s5" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s5" value="" size="3" /></td>
<td><input type="text" name="may_tc_s5" value="" size="3" /></td>
<td><input type="text" name="may_ac_s5" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s5" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s5" value="" size="3" /></td>
<td><input type="text" name="s5_t1" value="" size="5" /></td>
<td><input type="text" name="s5_t2" value="" size="5" /></td>
<td><input name="s5_t3" type="text" value="" size="5" /></td>
</tr>
<tr>
<th>Subject-6 </th>
<td><input type="text" name="dec_tc_s6" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s6" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s6" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s6" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s6" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s6" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s6" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s6" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s6" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s6" value="" size="3" /></td>
<td><input type="text" name="may_tc_s6" value="" size="3" /></td>
<td><input type="text" name="may_ac_s6" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s6" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s6" value="" size="3" /></td>
<td><input type="text" name="s6_t1" value="" size="5" /></td>
<td><input type="text" name="s6_t2" value="" size="5" /></td>
<td><input name="s6_t3" type="text" value="" size="5" /></td>
</tr>
<tr>
<td colspan="18"><div align="center">
<input type="submit" class="button" value="Update record" onClick="t1()" />
</div></td>
</tr>
</table>
<input type="hidden" name="idatten" value="" />
<input type="hidden" name="user_att_id" value="" />
<input type="hidden" name="MM_update" value="form1" />
<input type="hidden" name="username" value="" />
</form>
<p> </p>
<p> </p>
</body>
<SCRIPT LANGUAGE="JavaScript">
$('.percentage').each(function() {
if(parseInt($(this).html())>100){
$(this).css('background', '#FFCF87' )
alert('You Have Entered Attented class more than Total classes');
}
else if (parseInt($(this).html())<75){
$(this).css('background', '#FF9B82');
}
});
$('.iatotal').each(function() {
if(parseInt($(this).html())>25){
$(this).css('background', '#FFCF87' )
alert('You Have Worng number Please check your entry');
}
else if (parseInt($(this).html())<10){
$(this).css('background', '#FF9B82');
}
});
</script>
</html>

try something like following to loop over the multiple elements in your scenario:
<SCRIPT>
$(document).ready(function(){
$('.ac').change(function(){
$('.ac').each(function(index){
if($('.tc').get(index)) {
if($('.ac').get(index).val() > $('.tc').get(index).val()) {
alert(" ERROR !!! \n\n The attended classes are more than total classes");
}
}
});
});
var re = new RegExp("[0-9]");
$('.tc').change(function(){
if ($(this).val().match(re)) {
// DO NOTHING
}
else {
alert(" Please enter only numbers ");
}
});
});
</script>

Categories

Resources