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

Dynamically calculate and display the sum of all tr element

本文关键字：元素 tr 计算 显示 动态      更新时间：2023-09-26

JsFiddle

在我的情况下，每当用户输入数量字段的值时，我正在尝试动态计算和显示所有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);
});
  1. 您需要声明sum变量
    2. 当
  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/演示

试试这个。您需要声明总和，并且需要处理 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);

如前所述，您需要声明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);
    });
});
相关文章：