HTML Table - Iterate over row and sum the fields

Question

I have then following table:

    <table style="width:100%" id="testTable">
    <tr>
        <th>length per</th>
        <th>width per</th> 
        <th>length</th>
        <th>width</th>
        <th>total</th>
    </tr>
    <tr align='right'>
        <td>
            <input type="text" name="length-per-input">
        </td>
        <td>
            <input type="text" name="width-per-input">
        </td> 
        <td>
            <input type="text" name="length-total-input">
        </td>
        <td>
            <input type="text" name="width-total-input">
        </td>
        <td>
            <input type="text" name="total-output" disabled="disabled">
        </td>
    </tr>
    <tr align='right'>
        <td>
            <input type="text" name="length-per-input">
        </td>
        <td>
            <input type="text" name="width-per-input">
        </td> 
        <td>
            <input type="text" name="length-total-input">
        </td>
        <td>
            <input type="text" name="width-total-input">
        </td>
        <td>
            <input type="text" name="total-output" disabled="disabled">
        </td>
    </tr>
</table>

<input type=button value='+' onclick="addRow()" />
<input type=button value='Calculate' onclick="Calculate()" />

I also have the javascript which adds the value and puts it in total:

<script>
    function Calculate() {
        var lengthPerInput = $("input[name='length-per-input']").val();
        var widthPerInput = $("input[name='width-per-input']").val();
        var lengthTotal = $("input[name='length-total-input']").val();
        var widthTotal = $("input[name='width-total-input']").val();
        var total = (lengthTotal/lengthPerInput) + (widthTotal/widthPerInput);
        $("input[name='total-output']").val(total);
    }
</script>

The aim here is to have it iterate over the two rows, then add each one separately. I know how to get each row by using:

$('#testTable tr').each(function(){
    console.log(this);
    $(this).find('length-per-input').each(function(){
        console.log(this);
    })
})

But using the row (accessed via "this") I don't know how to get the correct cells, get their value, then perform the calculate on that row for the total.

Any advice on this please? Thank you!

score 1 · Accepted Answer · answered Jul 03 '15 at 09:54

    function Calculate(tr_row) {
        var lengthPerInput = tr_row.find("input[name='length-per-input']").val();
        var widthPerInput = tr_row.find("input[name='width-per-input']").val();
        var lengthTotal = tr_row.find("input[name='length-total-input']").val();
        var widthTotal = tr_row.find("input[name='width-total-input']").val();
        var total = (lengthTotal/lengthPerInput) + (widthTotal/widthPerInput);
        tr_row.find("input[name='total-output']").val(total);
    }

For every row you call function to summ the values To the function you pass the row, then it can collect values on that row

$('#testTable tr').each(function(){
    Calculate($(this))   
})

Works perfectly, thanks, appreciate the quick and brilliant responses! — Gary, Jul 03 '15 at 10:15

score 0 · Answer 2 · edited May 23 '17 at 12:06

You can use each() function to iterate through table and use find() function to find cell values.

function Calculate() {
  $('#testTable tr').each(function() {
    var lengthPerInput = $(this).find("input[name='length-per-input']").val();
    var widthPerInput = $(this).find("input[name='width-per-input']").val();
    var lengthTotal = $(this).find("input[name='length-total-input']").val();
    var widthTotal = $(this).find("input[name='width-total-input']").val();
    var total = (lengthTotal/lengthPerInput) + (widthTotal/widthPerInput);
    $(this).find("input[name='total-output']").val(total);
  });
}

Working Plunker

How to get a table cell value using jQuery?

HTML Table - Iterate over row and sum the fields

2 Answers2