jQuery循环遍历表格单元格，然后遍历各行-each() [英] JQuery Loop Through Table Cells, Then Rows - each()

问题描述

我在尝试遍历表行，计算值(然后输出)然后移至下一行时有些卡住.似乎对于第一行工作正常?

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?

这是一个代码段和jsfiddle链接:

Here's a code snippet and jsfiddle link:

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/

谢谢！

编辑:

好吧，我是个固执的人，所以我坚持自己的想法.这是我最终得到的代码.总计行，然后累加列.

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);
    }
});

推荐答案

首先，我看到一个问题，在您的第一个rows.each中，您正在遍历 all td的孩子c1>.而是使用this将其限制为您正在循环通过的当前行.另外，您的qty和rate部分没有任何作用域，您也在查看所有 td.

First up I can see a problem, in your first rows.each you are then looping through all td that are children of rows. Instead use this to limit it to the current row that you are looping through. Also, you don't have any scope for your qty and rate parts, you are looking at all tds as well.

您可能需要将选择器作为输出的内容进行调整，因为我实际上并不知道您的布局或尝试在何处显示输出.

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.

这篇关于jQuery循环遍历表格单元格，然后遍历各行-each()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！