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

您需要声明sum变量
如果没有文字<{li>，parseFloat($(this).text().slice(1))将返回NaN
为什么使用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);
    });
});

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

3 个答案: