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

我在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函数，就像我当前的函数一样，它可以用于任何表单，即使是在同一页面上，也不会在表单之间混合字段

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

我尝试了不同的方法，特别是用

包围表格，然后通过“

currentdiv=$（this.prev（“div”）；”

找到它，然后使用each函数循环“currentdiv”。 但每次要么代码不起作用，要么total字段将来自其他表单的金额相加！ 我还尝试了以下类似的方法，但没有使用

：

---

提前感谢您的帮助

为什么不将包含所有元素的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));
}

这将完成以下工作：

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

---

我得到了一个纯jQuery解决方案。它将使用您的标记，并在每次更新字段时查找每个表的总和

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

---

总体上对代码进行一次小的修改。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，就像处理程序的

elem

参数一样。

添加每一行非常有效

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

---

你能给我们展示一下不同表单和输入之间的html示例吗？我认为你甚至不必做$（el）你可以只做el.find（…）@11684是的，但参数el是上面代码中的jQuery选择，因此，将其包装为jQuery选择是冗余查找是jQuery-只需使用您想要的库或纯js节点遍历代码替换.find即可。编辑$（el）部分。符文FS是正确的-我已经选择了el，所以el是一个jQuery对象，不需要是$（el）就可以是elGreat！你的代码工作正常！我只是把“tbl.find（'.total'）.html”改为“tbl.find（'input.total'）.html”（因为我的total字段是一个范围，而不是一个输入字段）。谢谢。我将发布完整的答案。我只是知道我现在无法回答我自己的问题。。。没关系，拿着我的桌子，你想复制/粘贴多少次就复制/粘贴多少次。然后使用Derija93的代码（结尾是“tbl.find（'.total'）.html”）。。。看看魔法！再次感谢，感谢所有的贡献者！

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

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