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

结果是

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

Answer 2

输入更改时，计算输入的总和。如果一个输入为空，则返回，如果没有将总数分配给tr的最后一个输入。

$(".form-control").change(function(){
   var tr = $(this).parents("tr");
   var total = 0;
   for (var i = 0; i < tr.find("input").length; i++) {
       if ($(tr).find("input").eq(i).val() == 0 || $(tr).find("input").eq(i).val() == "")
          return;
       total += parseInt($(tr).find("input").eq(i).val());
   }

   $(tr).find("input").eq($(tr).find("input").length-1).val(total);
}

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

2 个答案: