JQuery 循环遍历表格单元格，然后是行 - each()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5140554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Loop Through Table Cells, Then Rows - each()
提问by logic-unit
I'm a bit stuck trying to loop through a table row, calculate the values (which are then output) then move onto the next row. Seems to work fine for the first row?
我在尝试遍历表行，计算值（然后输出）然后移到下一行时有点卡住了。似乎对第一行工作正常？
Here's a code snippet and jsfiddle link:
这是一个代码片段和 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);
});
});
Thanks!
谢谢！
EDIT:
编辑：
Okay so being the stubborn man I am, I forged ahead with my own ideas. This is the code I ended up with. Totals the rows, then adds up the columns.
好吧，作为固执的我，我凭着自己的想法勇往直前。这是我最终得到的代码。合计行，然后将列相加。
$("#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);
}
});
回答by Blair McMillan
First up I can see a problem, in your first rows.eachyou are then looping through alltd that are children of rows. Instead use thisto limit it to the current row that you are looping through. Also, you don't have any scope for your qtyand rateparts, you are looking at alltds as well.
首先，我可以看到一个问题，在您的第一个中，rows.each您将遍历所有.td 的子代rows。而是用于this将其限制为您正在循环的当前行。此外，您没有任何范围用于您的qty和rate零件，您也在查看所有tds。
You may need to adjust the selectors as stuff for the outputs as I don't actually know your layout or where you are trying to display the outputs.
您可能需要调整选择器作为输出的东西，因为我实际上并不知道您的布局或您尝试在何处显示输出。
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);
});
});
Potentially though, you could bind to the change events for each input field and only do the calculations then. If you can edit your source to add some more classes you could do something like:
但是，您可能会绑定到每个输入字段的更改事件，然后才进行计算。如果您可以编辑源代码以添加更多类，您可以执行以下操作：
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));
}
Not sure if it'd be faster or easier though.
不确定它是否会更快或更容易。
