JQuery：用于计算输入字段总数的表单......但同一页面上有多个此表单的实例

Question

我在 Stackoverlfow 上花了 20 多个小时来寻找解决问题的方法（尝试组合不同的解决方案），但我仍然卡住了，绝对需要你的帮助！

基本上，我有一个简单的表单，其中包含 3 个“金额”输入字段和一个“总金额”字段（3 个金额的总和）。

这是 HTML 代码：

<table border="1">

    <tr>
        <td>Amount 1</td>
        <td><input class="amount" type="text"/></td>
    </tr>

     <tr>
        <td>Amount 2</td>
        <td><input class="amount" type="text"/></td>
    </tr>

    <tr>
        <td>Amount 3</td>
        <td><input class="amount" type="text"/></td>
    </tr>

    <tr>
        <td>Total Amount</td>
        <td><span class="total">0</span></td>
    </tr>

</table>

然后是工作的 JQuery 代码：

$(document).ready(function(){           
        $('input').each(function() {
            $(this).keyup(function(){   
                calculateTotal();
            });
        });
    });

    function calculateTotal() {
        var sum = 0;
        $('input').each(function() {
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });

        $(".total").html(sum.toFixed(2));
    }

但是我想在同一个页面中使用同一个表单的多个实例，并且我试图只有一个像我当前的那样的“通用”JQuery 函数，它可以适用于任何表单，即使在同一个页面上, 不会在表单之间混合字段。

基本上，一个函数说“每次更新输入字段时，重新计算总金额并将其放入CURRENT表单/表格的总字段中”

我尝试了不同的方法，特别是用<div> 包围表格，然后通过“currentdiv = $(this).prev("div");"”找到它，然后使用每个函数循环通过“当前 div”。 但每次要么代码不工作，要么其他表单的总字段加起来！ 我还尝试了以下类似的方法，但没有使用<div>：

$(this).closest('tr').next().find('span.total').html(sum.toFixed(2));
or
$(this).closest('span.total').html(sum.toFixed(2));
or even
$(this).closest('span').prevAll('.total:first').html(sum.toFixed(2));

提前感谢您的帮助！

Answer 1

总体上对您的代码进行一些大修。 jQuery 不要求您遍历所有匹配的元素以将侦听器附加到它们。这样就够了：

$(document).ready(function(){           
    $('input.amount').keyup(function(){   
        calculateTotal(this);
    });
});

function calculateTotal( src ) {
    var sum = 0,
        tbl = $(src).closest('table');
    tbl.find('input.amount').each(function( index, elem ) {
        var val = parseFloat($(elem).val());
        if( !isNaN( val ) ) {
            sum += val;
        }
    });
    tbl.find('input.total').html(sum.toFixed(2));
}

请注意，事件处理程序中的 this 关键字不是 jQuery 包装的，AFAIK，就像 .each 处理程序的 elem 参数一样。

Answer 2

为什么不直接把包含所有元素的table元素传进去：

calculateTotal(this.parent('table'));//I would set a class on table personally and you need to test this;

然后你有一个参考，你可以使用它来获取正确的输入和跨度，即：

function calculateTotal(el) {
    var sum = 0;
    $(el).find('input').each(function() {
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });

    $(el).find(".total").html(sum.toFixed(2));
}

Answer 3

添加每一行的效果非常好

$(function() {
    $('.ssizeform').each(function() {
        $(this).keyup(function() {
            calculateTotal($(this));
        });
    });
});

function calculateTotal(src) {
    var sum = 0;
    var sumtable = src.closest('tr');

    sumtable.find('.ssizeform').each(function() {
        if(!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });

    sumtable.find(".qty").html(sum.toFixed(0));
}

Answer 4

这样就可以了：

$(document).ready(function(){           
        $('input').each(function() {
            $(this).keyup(function(){   
                calculateTotal($(this).closest('table'));
            });
        });
    });

    function calculateTotal($tab) {
        var sum = 0;
        $tab.find('input').each(function() {
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });
        $tab.find(".total").html(sum.toFixed(2));
    }
});

Answer 5

我有一个纯 jQuery 解决方案来处理 jsFiddle page。每次更新字段时，它将使用您的标记并查找每个表的总和。

$("input.amount")
  .keyup(function() {
    total = 0;
    $(this)
      .parents("table")
      .find("input.amount")
        .each(function() {
            total += parseInt($(this).val());
        })
      .end()
      .find("span.total")
      .html(total);
  });​