2

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

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

我尝试了不同的方法，特别是通过围绕表格<div>然后通过 " 找到它，currentdiv = $(this).prev("div");"然后使用 each 函数循环通过 "当前 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));

在此先感谢您的帮助！

4

5 回答 5

4

一般来说，对您的代码进行一些大修。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，就像.eachelem处理程序的参数一样。

于 2012-08-05T08:39:29.197 回答
1

为什么不直接传递包含所有元素的表格元素：

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));
}
于 2012-08-05T08:22:21.150 回答
1

这创造了奇迹来添加每一行

$(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));
}
于 2013-06-08T06:47:52.350 回答
0

这将完成这项工作：

$(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));
    }
});
于 2012-08-05T08:35:07.963 回答
0

我在那个jsFiddle 页面上有一个纯 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);
  });​
于 2012-08-05T08:36:15.740 回答