如何使用jquery自动计算表行？

Question

我有一个有 3 个表行的表，每行包含 5 列和输入文本框，最后一列是 4 列中输入的值的总和。我想在 4 列填充值后使用 jquery 或 javascript 自动计算总数。我怎么能这样做？这是我的表格代码。

桌子

<table name="tbl_a" id="tbl_a">
<tr>
    <td><span style="margin-left:30px;">a. Provision of  certified seeds</span></td>
    <td>no. of bags</td>
    <td>per AT</td>
    <td><input type="text" class="form-control" name="at[a]" id="a" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[b]" id="b" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[c]" id="c" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[d]" id="d" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_1]" id="total_1" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
    <td></td>
    <td>no. of farmers</td>
    <td></td>
    <td><input type="text" class="form-control" name="at[e]" id="e" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[f]" id="f" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[g]" id="g" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[h]" id="h" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_2]" id="total_2" value=""  value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
    <td style="text-align:center;">Rehab Seeds</td>
    <td>no. of bags</td>
    <td>per AT</td>
    <td><input type="text" class="form-control" name="at[i]" id="i" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[j]" id="j" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[k]" id="k" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[l]" id="l" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_3]" id="total_3" value="" value="" placeholder="total"  style= "width:160px;"/></td>
</tr>
</table>

Answer 1

首先，请谷歌搜索您想要实现的目标，学习自己，尝试找到解决方案。如果您仍然没有成功，请使用您尝试过的相关代码以及一些游乐场（例如 jsfiddle.net 或 jsbin.com 等）提问。

但是，这是我使用的脚本。我添加total到最后一个输入字段。

$(function () {
    var tbl = $('#tbl_a');
    tbl.find('tr').each(function () {
        $(this).find('input[type=text]').bind("keyup", function () {
            calculateSum();
        });
    });

    function calculateSum() {
        var tbl = $('#tbl_a');
        tbl.find('tr').each(function () {
            var sum = 0;
            $(this).find('input[type=text]').not('.total').each(function () {
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }
            });

            $(this).find('.total').val(sum.toFixed(2));
        });
    }
});

这是结果。在此脚本中，您可以拥有任意数量的行，但最后一行需要具有不同的类名，否则其值也会添加到总数中。