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

我猜你应该将输入值解析为浮点数。

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

Answer 2

在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();

以上是jsfiddle

上面的jquery版本

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 3

尝试这样的事情，Fiddle

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

Answer 4

使用此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

Answer 5

这个解决方案怎么样：

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/

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

从每行表单字段中获取总和

5 个答案: