我试图循环一个表行,计算值(然后输出),然后移动到下一行.似乎第一行工作正常吗？
这是一个代码片段和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,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);
}
});
解决方法
首先我可以看到一个问题,在你的第一行,然后你循环遍历所有td的行的孩子.而是使用它来限制它到您正在循环的当前行.另外,您的数量和费率部分没有任何余地,您也可以查看所有tds.
您可能需要调整选择器作为输出的东西,因为我实际上不知道您的布局或尝试显示输出.
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,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));
}
不知道它是否会更快或更容易.