jquery：动态删除内容后的求和值得到 NaN

Question

这是我的 js:

function sumAllFields() {
    var priceSum = 0;
    $(".price").each(function () {
        var o = $(this).parent().parent().index();
        priceSum += Number($("#area" + o).text()) * $("#price" + o).val();
    })
    $("#sumPrice, #printSumPrice").html(priceSum.toFixed(2));
}

这里是相关的 html:

<tbody id="tableBody">
<tr class="tableRow" id="tableRow0"> 
    <td><input class="idNumber" id="idNumber0" type="number"></td>
    <td><input class="description" id="description0" type="text"></td>
    <td class="dimA" id="dimA0">520</td>
    <td class="dimB" id="dimB0">785</td>
    <td><input class="pcs" id="pcs0" type="number"></td>
    <td class="area" id="area0">2.46</td>
    <td><input class="price" id="price0" type="number"></td>
    <td class="noprint"><span class="closed">×</span></td>                         
</tr>

<!-- and a few more in between... -->

<tr class="tableRow" id="tableRow8">
    <td><input class="idNumber" id="idNumber8" type="number"></td>
    <td><input class="description" id="description8" type="text"></td>
    <td class="dimA" id="dimA8">510</td>
    <td class="dimB" id="dimB8">785</td>
    <td><input class="pcs" id="pcs8" type="number"></td>
    <td class="area" id="area8">0.80</td>
    <td><input class="price" id="price8" type="number"></td>
    <td class="noprint"><span class="closed">×</span></td>                         
</tr>
</tbody>

我想做的是在一个 <tr> 被动态删除后自动对所有 .price 字段求和，而我得到的只是 NaN。在我删除任何行之前，我得到一个很好的数字，但在我删除任何行之后，我得到 NaN。

Answer 1

这是因为您用于查找同级 price/area 元素的逻辑。假设您添加了 4 个项目，因此您有 area0/area1/area2/area3 这样的元素。现在您正在删除第 2 行，因此元素 area1 不再存在然后在第二次迭代的每个循环中 o 变为 1 然后它尝试查找元素 #area1 但没有这样的元素导致 Number($("#area" + o).text()) 返回 NaN.

的元素

尝试

function sumAllFields() {
    var priceSum = 0;
    $(".price").each(function () {
        var $tr = $(this).closest('tr');
        priceSum += (+$tr.find(".area").text() * +this.value) || 0;
    })
    $("#sumPrice, #printSumPrice").html(priceSum.toFixed(2));
}

演示：Fiddle

Answer 2

让我们直接迭代 table 行：

function sumAllFields() {
  var priceSum = 0;
  $('.tableRow').each(function () {
    var row = $(this);
    priceSum += (parseFloat(row.find('.area').text())
      * parseFloat(row.find('.price').val())) || 0;
  })
  $('#sumPrice, #printSumPrice').html(priceSum.toFixed(2));
}

jquery：动态删除内容后的求和值得到 NaN

jquery: Summing values after dynamic delete of content gets NaN

javascript

jquery

nan