javascript - 动态计算并显示所有tr元素的总和

Question

提琴手

tr在我的例子中，每当用户输入数量字段的值时，我都会尝试动态计算和显示所有元素的总和。

有人可以修复我的代码中的错误。

jQuery代码：

$("table input").on('change blur input', function() {
var val = this.value;
$(this).closest('tr').find('td:eq(4)').text(function(){
    return (+$.trim($(this).siblings(':eq(3)').text()) * +val)   
 })
$('table  tr td:nth-of-type(5)').each(function() {
        sum += parseFloat($(this).text().slice(1));
    });
    $('.sum').text(sum);
});

Answer 1

尝试这个。你需要声明 sum，你需要处理 NaN 的情况。

var sum = 0;
$('table  tr td:nth-of-type(5)').each(function() {
    var m = parseFloat($(this).text().slice(1));
    if (!isNaN(m)) {
        sum += m;
    }
});
console.log(sum);

Answer 2

1. 你需要声明sum变量
2. 没有文本时将parseFloat($(this).text().slice(1))返回NaN
3. 你为什么用slice(1)？您需要解析整个文本。

所以

$("table input").on('change blur input', function () {
    var val = this.value;
    var sum = 0;
    $(this).closest('tr').find('td:eq(4)').text(function () {
        return (+$.trim($(this).siblings(':eq(3)').text()) * +val)
    });
    $('table  tr td:nth-of-type(5)').each(function () {
        sum += parseFloat($(this).text()) || 0;
    });
    $('.sum').text(sum);
});

演示在http://jsfiddle.net/KrN7Z/18/

---

更好的方法

但是您应该为 HTML 中的某些元素提供一些类，这会大大简化一切。

    <tr>
        <td>someno</td>
        <td>
            <input type="text" placeholder="Some Name" />
        </td>
        <td>
            <input type="text" class="quantity" placeholder="Quantity" />
        </td>
        <td class="price">50</td>
        <td class="total"></td>
        <td>something</td>
    </tr>

和

$("table input").on('change blur input', function () {
    var row = $(this).closest('tr'),
        quantity = +row.find('.quantity').val(),
        price = parseFloat(row.find('.price').text());

    row.find('.total').text(quantity * price);

    var sum = 0;
    $('.total').each(function () {
        sum += parseFloat($(this).text()) || 0;
    });

    $('.sum').text(sum);
});

演示在 http://jsfiddle.net/KrN7Z/22/

Answer 3

如前所述，您需要声明sum、处理NaN案例并更新每个输入的总值。尝试这个：

 $("table input").on('change blur input', function () {
    var val = this.value;
    var sum = 0;
    $(this).closest('tr').find('td:eq(4)').text(function () {
        return (+$.trim($(this).siblings(':eq(3)').text()) * +val);
    });
    $('table  tr td:nth-of-type(5)').each(function () {
        var k = parseFloat($(this).text());
        sum +=  isNaN(k)?0:k;
        $('.sum').text(sum);
    });
});