JQuery循环通过表格单元格，然后行 – 每个（）
我有点卡住尝试循环表行，计算值（然后输出）然后移动到下一行。 似乎第一行工作正常？
这是一个代码片段和jsfiddle链接：
var rows = $("#invoice_table tr:gt(0)"); // skip the header row rows.each(function(index) { rows.children("td").each(function() { // calculate amount, vat, subtotal for row qty = $("td:nth-child(3) input").val(); rate = $("td:nth-child(4) input").val(); amount = qty * rate; vat = amount / 100 * 20; subtotal = amount; subtotal += vat; vat = vat.toFixed(2); // limit to two decimal places amount = amount.toFixed(2); subtotal = subtotal.toFixed(2); $("td:nth-child(5) input").val(amount); // output the values $("td:nth-child(6) input").val(vat); $("td:nth-child(7) input").val(subtotal); }); }); http://jsfiddle.net/8QK2E/48/
谢谢！
编辑 ：
好吧，我是顽固的男人，我用自己的想法向前迈进。 这是我最终得到的代码。 总计行，然后将列相加。
$("#invoice_table").live({ // invoice calculations blur: function() { var qty = '0.0'; var rate = '0.0'; var amount = '0.0'; var amttotal = '0.0'; var vat = '0.0'; var vattotal = '0.0'; var subtotal = '0.0'; var total = '0.0'; var num_tr = $('#invoice_table tr').length; num_tr = num_tr-2; // skip totals row amount = amount * 1; // force js to handle the var as a number qty = qty * 1; rate = rate * 1; vat = vat * 1; amttotal = amttotal * 1; vattotal = vattotal * 1; total = total * 1; for(var i = 1;i < num_tr;i++) { var row = $('#invoice_table tr:nth-child('+i+')'); // skip the header row row.children("td").each(function() { // calculate amount, vat, subtotal for row qty = $('tr:nth-child('+i+') td:nth-child(3) input').val(); rate = $('tr:nth-child('+i+') td:nth-child(4) input').val(); amount = qty * rate; vat = amount / 100 * 20; subtotal = amount; subtotal += vat; vat = vat.toFixed(2); // limit to two decimal places amount = amount.toFixed(2); subtotal = subtotal.toFixed(2); $('tr:nth-child('+i+') td:nth-child(5) input').val(amount); // output the values $('tr:nth-child('+i+') td:nth-child(6) input').val(vat); $('tr:nth-child('+i+') td:nth-child(7) input').val(subtotal); }); } for(var i = 2;i < num_tr;i++) { var rows = $('#invoice_table tr:nth-child('+i+')'); // skip the header row amttotal += parseFloat($('tr:nth-child('+i+') td:nth-child(5) input').val()); vattotal += parseFloat($('tr:nth-child('+i+') td:nth-child(6) input').val()); total += parseFloat($('tr:nth-child('+i+') td:nth-child(7) input').val()); } amttotal = amttotal.toFixed(2); // limit to two decimal places vattotal = vattotal.toFixed(2); total = total.toFixed(2); $("#total_amount input").val(amttotal); $("#total_vat input").val(vattotal); $("#grand_total input").val(total); } });
首先，我可以在你的第一rows.each看到一个问题。然后你循环遍历所有 rows子rows.each 。 而是使用它将它限制为您循环的当前行。 此外，您没有任何范围的qty和rate部分，您也在查看所有 td 。
您可能需要将选择器调整为输出的内容，因为我实际上并不知道您的布局或您尝试显示输出的位置。
var rows = $("#invoice_table tr:gt(0)"); // skip the header row rows.each(function(index) { var qty_input = $("td:nth-child(3) input", this); var rate_input = $("td:nth-child(4) input", this); $(this).children("td").each(function() { // calculate amount, vat, subtotal for row var qty = qty_input .val(); var rate = rate_input .val(); var amount = qty * rate; var vat = amount / 100 * 20; var subtotal = amount; subtotal += vat; vat = vat.toFixed(2); // limit to two decimal places amount = amount.toFixed(2); subtotal = subtotal.toFixed(2); $('#total_amount').val(amount); // output the values $('#total_vat').val(vat); $('#grand_total').val(subtotal); }); });
但是，您可以绑定到每个输入字段的更改事件，然后只进行计算。 如果您可以编辑源代码以添加更多类，则可以执行以下操作：
var inputs = $('#invoice_table tr:gt(0) td.quantity input, #invoice_table tr:gt(0) td.rate input'); var amount_inputs = $('#invoice_table tr:gt(0) td.amount input'); var vat_inputs = $('#invoice_table tr:gt(0) td.vat input'); var subtotal_inputs = $('#invoice_table tr:gt(0) td.subtotal input'); inputs.change(function() { // Finding them this way purely so that we don't duplicate the code, // it would be faster to separate the inputs array into their type and bind the change appropriately. var qty = $(this).closest('tr').find('td.quantity input').val(); var rate = $(this).closest('tr').find('td.rate input').val(); var amount_input = $(this).closest('tr').find('td.amount input'); var vat_input = $(this).closest('tr').find('td.vat input'); var subtotal_input = $(this).closest('tr').find('td.subtotal input'); var amount = qty * rate; var vat = amount / 100 * 20; var subtotal = amount + vat; amount_input.val(amount.toFixed(2)); vat_input.val(vat.toFixed(2)); subtotal_input.val(subtotal.toFixed(2)); update_totals(); }); function update_totals() { var amttoal = 0; var vattotal = 0; var total = 0; amount_inputs.each(function(){ amttoal += this.val(); }); vat_inputs.each(function(){ vattotal += this.val(); }); subtotal_inputs.each(function(){ vattotal += this.val(); }); $("#total_amount input").val(amttoal.toFixed(2)); $("#total_vat input").val(vattotal).toFixed(2); $("#grand_total input").val(vattotal.toFixed(2)); }
不确定它是否更快或更容易。