Question

我有点卡住尝试循环表行，计算值（然后输出）然后移动到下一行。似乎第一行工作正常吗？

这是一段代码片段和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);
    }
});

Answer 1

首先我可以看到一个问题，在您的第一个rows.each中，您正在循环遍历rows的孩子的所有 td。而是使用this将其限制为您循环的当前行。此外，您的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));
}

不确定它是否更快或更容易。

JQuery循环通过表格单元格，然后行 - 每个（）

1 个答案: