JQuery Loop Through Table Cells, Then Rows - each()

Question

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:

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/

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

Just a note - Your code is really really slow. Even on chrome! I'd suggest you change it so it only works on the current row and not all rows. — JohnP
– JohnP, Commented Feb 28, 2011 at 10:09
Thanks for the feedback, yeah my JQuery is pretty weak...must improve that. — logic-unit
– logic-unit, Commented Feb 28, 2011 at 10:26
@JohnP it was the keyup slowing it down. Swapped this for a blur and it runs fine now - in case you were interested. — logic-unit
– logic-unit, Commented Feb 28, 2011 at 16:25
Cool. That'll be much more efficient cos it only fires once the change is complete. And once you filter only for the current row it'll be fast enough for even IE to handle :) — JohnP
– JohnP, Commented Feb 28, 2011 at 16:45

Blair McMillan · Accepted Answer · 2011-02-28 11:00:13Z

20

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.

edited Feb 28, 2011 at 11:00

answered Feb 28, 2011 at 10:12

Blair McMillan

5,3492 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

logic-unit Over a year ago

Thanks Blair, that makes a bit more sense now. The table layout is here: jsfiddle.net/8QK2E/48

logic-unit Over a year ago

I'm trying to add up the rows, then the columns, if that helps. The original post was just a snippet so the vars are defined further up the script.

Blair McMillan Over a year ago

Ahh I see. Use the ID of the final output columns then. I'll update the answer.

logic-unit Over a year ago

Thanks, that looks like a much better approach than what I was attempting!

Collectives™ on Stack Overflow

JQuery Loop Through Table Cells, Then Rows - each()

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related