guys im trying to make a dynamic design for adding students in a class with a button add on the 10th row ![enter image description here][1]
http://www.facebook.com/photo.php?fbid=4099710263250&set=a.1210298669766.32621.1597725369&type=3&theater
i can append a new row with a button on it but when i click the new button the click function did not respond and i still need to click the add button on the 10th row to add new one.
here is the code.
<table>
<th colspan="4"><h2>Boys</h2></th>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname1" class="input">
</td>
<td>
<input type="text" name="bstudnt_mname1" class="input">
</td>
<td>
<input type="text" name="bstudnt_fname1" class="input">
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname2" class="input">
</td>
<td>
<input type="text" name="bstudnt_mname2" class="input">
</td>
<td>
<input type="text" name="bstudnt_fname2" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname3" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname3" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname3" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname4" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname4" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname4" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname5" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname5" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname5" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname6" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname6" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname6" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname7" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname7" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname7" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname8" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname8" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname8" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname9" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname9" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname9" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname10" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname10" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname10" class="input" >
<input type="button" id="" name="add_bstudent" class="button add- bstudent" value="+">
</td>
</tr>
</table>
JS....
$('.add-bstudent').click(function () {
$(this).parent().parent().after("<tr><td><label>Name:</label></td><td> <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>");
});
When you use the click() function to register the event, it will only register the event on objects returned by the selector at that moment. If you create an object after the fact, it won't bind to the event. Use the on() function and give it your selector: http://api.jquery.com/on/
Example:
$('#container').on('click', '.add-bstudent', function(event) { ... });
The first thing I noticed is that you do not have a button with class by name of $('.add-bstudent').
It's the name attribute for the button..
Also consider delegating the event by using the .on() so that the event is attached when the element is available
Try this
$('.add-bstudent').click(function () {
$(this).parent('table').append("<tr><td><label>Name:</label></td><td> <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>");
});
Related
I made a data sheet similar to excel with columns and rows and a buttons to add rows and column if needed I want to make a cell or div disabled (for read-only) that display the summation of numbers inside cells in a specific column, the problem is how I select that column and every newly added cell to that column
here is the code of the datasheet
<div class="content-container">
<div class="search">
<button class="table_btn" id="addrow">
Add Row
</button>
<button class="table_btn" id="addcol">
Add Column
</button>
<button class="table_btn" id="sav">
Save
</button>
<button class="table_btn" id="edi">
Edit
</button>
<input type="text" class="form-control" id="search-box" />
</div>
<table
class="table table-striped table-dark table-hover table-bordered"
id="mtable"
>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/georgesteven1/5dsn7ouc/22/
If I get it right, you are looking for a selector for all elements in a certain column. If so you can use the ":nth-child(n)" CSS selector.
Let's say you need to select the second column:
$("tr td:nth-child(2)").addClass("selected");
Hope it helps.
I am creating a landing page with a form. I want to set up where every 10th person who signed up links to a "special" page where they receive a prize. For example: first 9 people will redirect to thankyou.html page where the 10th person will link to prize.html page. Is this possible? Thank you in advance.
<form method="post" enctype="multipart/form-data" action="http://form.relevanttools.com/rt-cgi-bin/satellite">
<input type="hidden" name="code" value="12531"> <input type="hidden" name="db" value="project"> <input type="hidden" name="source" value="Prize"> <input type="hidden" name="optin" value=""> <input type="hidden" name="type" value="signup"> <input type="hidden" name="user_email_msg" value=""> <input type="hidden" name="admin_email_addr" value=""> <input type="hidden" name="redir" value="http://www.link.com/thankyou.html">
<table border="0">
<tr>
<td> </td>
<td>First Name*</td>
<td> </td>
<td> <input type="text" id="first_name" name="first_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Last Name*</td>
<td> </td>
<td> <input type="text" id="last_name" name="last_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Email*</td>
<td> </td>
<td> <input type="text" id="email" name="email*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Age*</td>
<td> </td>
<td> <input type="text" id="age" name="age*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Gender</td>
<td> </td>
<td>
<div class="align-left"> <input type="radio" name="gender" value="Male">Male<br> <input type="radio" name="gender" value="Female">Female<br> </div>
</td>
</tr>
<tr>
<td> </td>
<td>Zip</td>
<td> </td>
<td> <input type="text" id="zip" name="zip" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Private Policy*</td>
<td> </td>
<td> <input type="checkbox" id="private_policy" name="private_policy" value="x"> </td>
</tr>
<tr>
<td> </td>
<td>Email Subscription</td>
<td> </td>
<td> <input type="checkbox" id="email_opt_in" name="email_opt_in" value="x"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value = "Submit" ></td>
</tr>
</table>
</form>
You could give the button a 10% probability of redirecting to the prize page - but that's the best without a server.
Javascript is client side. Meaning it has no way of knowing how other people have acted. The only way to know that is storing every click in a database and counting that.
I am new to jQuery and javascript, I need a help on how to do computation on form text field in an array. See below sample code;
<head lang="en">
<meta chartaxt="UTF-8">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<title>Sample salary computation</title>
</head>
<body>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
</form>
</body>
I want a jquery script that can sum total = (salary + tax) for each staff using onclick button
$("#submit").click(function() {
$("tr").each(function() {
if ($(this).find(".salary")) {
var salary = parseInt($(this).find(".salary").val(), 10)
var tax = parseInt($(this).find(".tax").val(), 10)
$(this).find(".total").val(salary + tax)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
<button id="submit" type="button">Submit</button>
You can use selector to get or set the val with iQuery. Something like this
$("button").click(function(){
var total = $("input[name=salary]").val()+$("input[name=tax]").val();
$("input[name=total]").val(tatal);
});
Here is one solution:
http://codepen.io/tryggvigy/pen/BzAqGR
var sums = []
$('input[type=button]').click(function() {
var salaries = $('.salary')
.toArray()
.map(function(salary) { return salary.value })
var taxes = $('.tax')
.toArray()
.map(function(tax) { return tax.value})
sums = salaries.map(function(salary, i) {
return parseInt(salary) + parseInt(taxes[i])
})
alert(document.sums)
})
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE
I'm working on a project that is based on an Excel spreadsheet, where I need to calculate budgets, etc. There are various categories in my table, and I need to calculate the subtotal of each category. Here's a screenshot to make it more clear:
http://i.imgur.com/loyLbW7.png
My problem is, I'm not sure how to calculate the subtoal for each category. Right now, I have $('.subcat100 .budget').each(function(). The class "subcat100" is attached to the tr and changes for each category section (subcat100, subcat200, subcat300, etc.). The numerical value is based off the sub category number stored in database. How would I pull all of these classes and iterate through them?
jQuery:
$(document).ready(function() {
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
var decimal = budget.toFixed(2);
$row.find('.budget').val(decimal);
var sum = 0;
$('.subcat100 .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat100 .budgetsubtotal').val(sum);
});
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
});
HTML:
<table>
<tbody>
<tr class="subcat100">
<td>
<span name="txtItemCode[]"><strong>100</strong></span>
</td>
<td colspan="7">
<span name="txtSubCategoryName[]" class="100"><strong>Land Purchase Costs</strong></span>
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="101">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Purchase price">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="1">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="299.99">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="299.99">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="249.99">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="50.00">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="110">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Realtor's fees">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="120">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Due diligence">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="15">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="45.00">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="675.00">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="700.00">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="-25.00">
</td>
</tr>
<tr class="subcat100">
<td colspan="5">
<span><strong>Subtotal</strong></span>
</td>
<td>
<input type="text" name="txtSubTotalBudget[]" class="budgetsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalActual[]" class="actualsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalDifference[]" class="differencesubtotal" size="10" readonly="readonly" value="">
</td>
</tr>
</tbody>
</table>
Well, I ended up doing this:
var itemcodes = <?php echo json_encode($arrItemCodes);?>;
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
$row.find('.budget').val(budget.toFixed(2));
$.each(itemcodes, function(intIndex, objValue) {
var sum = 0;
$('.subcat' + objValue + ' .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat' + objValue + ' .budgetsubtotal').val(sum.toFixed(2));
});
});
Open to other suggestions!