Question

I have the following table which allows a person to enter data. What I’m trying to do is build a simple function that will work out the totals for each column.

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input type="text" class="output" value="0" /></td>
            <td><input type="text" class="output" value="0" /></td>
            <td><input type="text" class="output" value="0" /></td>
        </tr>
    </tbody>
</table>

The jQuery I have put in place so far is:

var total = 0;
// for each table row first cell
$('table tbody tr td:nth-child(1)').each(function () {
    // add together the input values of each row
    total += parseInt($(this).find('input').val());
    // find the output for that column (note i think this is where the problem is)
    $(this).parents('tr').find('.output').val(total);
});

Doesn’t work though. Can anyone help? Thanks very much.

Answer 1

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input data-field="col1" type="text" value="100" /></td>
            <td><input data-field="col2" type="text" value="100" /></td>
            <td><input data-field="col3" type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input data-field="col1" type="text" value="100" /></td>
            <td><input data-field="col2" type="text" value="100" /></td>
            <td><input data-field="col3" type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input data-field="col1" type="text" value="100" /></td>
            <td><input data-field="col1" type="text" value="100" /></td>
            <td><input data-field="col1" type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input data-field="col1" type="text" class="output" value="0" /></td>
            <td><input data-field="col2" type="text" class="output" value="0" /></td>
            <td><input data-field="col3" type="text" class="output" value="0" /></td>
        </tr>
    </tbody>
</table>

The jQuery:

var total = 0;
$('table input[data-field="col1"]:not(.output)').each(function () {
    // add together the input values of each row
    total += parseInt($(this).val());
    $(input[data-field="col1"].output).val(total);
});

repeat this for each column, and better yet, create a function that takes in the data-field and call it for each group.