javascript - 从每一行表单域中获取总和

Question

我试图计算一些行（输入字段），但它对我来说很难:(。我
的 html 代码如下所示：

<table>
<tr>
    <td>
    <input name="Field_Price_1" id="Field_Price_1" value="20.55" type="text">
    <input name="Field_Amount_1" id="Field_Amount_1" type="text">
    <input name="Field_SubTotal_1" id="Field_SubTotal_1" type="text">
    </td>
</tr>
<tr>
    <td>
    <input name="Field_Price_2" id="Field_Price_2" value="17.55" type="text">
    <input name="Field_Amount_2" id="Field_Amount_2" type="text">
    <input name="Field_SubTotal_2" id="Field_SubTotal_2" type="text">
    </td>
</tr>
<tr>
    <td>
    <input name="Field_Price_3" id="Field_Price_3" value="94.20" type="text">
    <input name="Field_Amount_3" id="Field_Amount_3" type="text">
    <input name="Field_SubTotal_3" id="Field_SubTotal_3" type="text">
    </td>
</tr>
<tr>
    <td>
    <input name="Field_Price_4" id="Field_Price_4" value="12.10" type="text">
    <input name="Field_Amount_4" id="Field_Amount_4" type="text">
    <input name="Field_SubTotal_4" id="Field_SubTotal_4" type="text">
    </td>
</tr>
<tr>
    <td>
    <input name="Field_Price_5" id="Field_Price_5" value="7.45" type="text">
    <input name="Field_Amount_5" id="Field_Amount_5" type="text">
    <input name="Field_SubTotal_5" id="Field_SubTotal_5" type="text">
    </td>
</tr>

因此，我将通过从每个 Field_Amount_ 触发“keyup”，将所有输入字段“Field_Price_”的总和放入以下范围。

<table>
<tr>
    <td><span id="PrintSum">0.00</span></td>
</tr>

以下我试过：

var total = 0;
var Price = $('input[id^=Field_Price_]').val();
   $.each($(Price), function(){
      total += $(this).val();
   });
$('#PrintSum').text(total);  

所以这行不通。
有谁知道是什么问题？非常感谢！

Answer 1

I guess you should be parse the input value to an float.

var total = 0;
var Price = $('input[id^=Field_Price_]').val();
   $.each($(Price), function(){
      total += parseFloat($(this).val());
   });
$('#PrintSum').text(total);  

Answer 2

这个解决方案怎么样：

var $prices  = $('input[id^=Field_Price_]'),
    $amounts = $('input[id^=Field_Amount_]');

$prices.add($amounts).on('keyup', function() {
    var total = 0;
    $prices.each(function() {
        total += $(this).val() * $(this).next().val() || 0;
    });
    $('#PrintSum').text(total.toFixed(2));
})
.trigger('keyup');

http://jsfiddle.net/UFSvF/

此处更改价格和金额会触发重新计算总价格。

Answer 3

试试这样的东西，小提琴

var total = 0;
var Price = $('input[id^=Field_Price_]');
   $.each($(Price), function(){
      total += parseInt($(this).val());
   });
$('#PrintSum').text(total); 

Answer 4

在jsfiddle 上，一个不使用 jquery 的示例，但您可以修改以在那里进行测试

var prices = document.querySelectorAll("[id^=Field_Price]"),
    ammounts = document.querySelectorAll("[id^=Field_Amount]"),
    subTotals = document.querySelectorAll("[id^=Field_SubTotal]"),
    printSum = document.getElementById("PrintSum");

function sumIt() {
    var total = 0;

    Array.prototype.forEach.call(prices, function (price, index) {
        var subTotal = (parseFloat(price.value) || 0) * (parseFloat(ammounts[index].value) || 0);

        subTotals[index].value = subTotal.toFixed(2);
        total += subTotal;

    });

    printSum.textContent = total.toFixed(2);
}

Array.prototype.forEach.call(prices, function (input) {
    input.addEventListener("keyup", sumIt, false);
});

Array.prototype.forEach.call(ammounts, function (input) {
    input.addEventListener("keyup", sumIt, false);
});

sumIt();

这是上面的 jquery 版本，在jsfiddle

var prices = $("input[id^=Field_Price_]"),
    amounts = $("input[id^=Field_Amount_]"),
    subTotals = $("input[id^=Field_SubTotal_]"),
    printSum = $("#PrintSum");

function sumIt() {
    var total = 0;

    prices.each(function(index, price) {
        var subTotal = (parseFloat(price.value) || 0) * (parseFloat(amounts.eq(index).val()) || 0);

        subTotals.eq(index).val(subTotal.toFixed(2));
        total += subTotal;
    });

    printSum.text(total.toFixed(2));
}

prices.on("keyup", sumIt);

amounts.on("keyup", sumIt);

sumIt();

我将很快修改我的纯 javascript 版本，向您展示如何实现进一步的提问，而不需要包含 jquery。

它现在已经更新，所以你可以看到它是如何工作的

还有一个jsperf展示了两者的构建性能

Answer 5

使用这个 javascript

$(':input[id^="Field_Price_"]').keyup(function() {
    var total = 0;
    var $inputs = $(':input[id^="Field_Price_"]');
    $inputs.each(function (index)
         {
           total += parseFloat($(this).val());
         });
    alert(total);
    $('#PrintSum').text(total);  
});

jsFiddle