Question

我收到了NaN错误。代码是从小提琴复制完美的。这是代码。

<tbody>
          <tr>
            <td><input type="checkbox" name="payment_id[]" id="payment_id_" value="6" class="box" checked="checked" /></td>                
            <td>2015-08-26 20:43:50 UTC</td>
            <td>1000002043</td>
            <td class = "amount">25.0</td>
            <td>CHK</td>
            <td></td>
            <td></td>
            <td>5</td>
            <td><a href="/payments/6">Show</a></td>
            <td><a href="/payments/6/edit">Edit</a></td>
            <td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/payments/6">Destroy</a></td>
          </tr>
        <% end %>
      </tbody>
      <td>Total</td><td><div id="total"></div></td>

这是jquery

$(function() {
$('.box').change(function(){

   var total = 0;
   $('.box:checked').each(function(){
        total+=parseFloat($(this).parent().next('td').find('.amount').text());
   });       
   $('#total').text(total);
});
});

我在总元素中得到NaN。

Answer 1

让我们分解你的jQuery链：

$(this) // ,box
    .parent() // The <td>
    .next('td') // The next <td> in the sequence
    .find('.amount') // Tries to find an element with class `amount` inside the <td>
    .text() // Empty, because the previous element doesn't exist

您需要做的是将.amount附加到您的选择器上，然后使用nextAll，如下所示：

$(this).parent().nextAll("td.amount").text()

如果你有多个amount课程，你需要确保你只选择第一个课程：

$(this).parent().nextAll("td.amount:first").text()

示例：

$('.box').change(function(){

   var total = 0;
   $('.box:checked').each(function(){
        total+=parseFloat($(this).parent().nextAll('td.amount').text());
   });       
   $('#total').text(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
          <tr>
            <td><input type="checkbox" name="payment_id[]" id="payment_id_" value="6" class="box" checked="checked" /></td>                
            <td>2015-08-26 20:43:50 UTC</td>
            <td>1000002043</td>
            <td class = "amount">25.0</td>
            <td>CHK</td>
            <td></td>
            <td></td>
            <td>5</td>
            <td><a href="/payments/6">Show</a></td>
            <td><a href="/payments/6/edit">Edit</a></td>
            <td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/payments/6">Destroy</a></td>
          </tr>
      </tbody>
</table>
<div id="total"></div>

Answer 2

考虑到每行输入一次金额，我跳回到行并在行中找到了td.amount。

(function($) {
    $('.box').change(function(){
       var total = 0;
       $('.box:checked').each(function(){
            total += parseFloat($('td.amount', $(this).closest('tr')).text());
       });       
       $('#total').text(total);
    });
})(jQuery);

Answer 3

存在引用错误。使用：

$(function() {
$('.box').change(function(){

   var total = 0;
   $('.box:checked').each(function(){
        total+=parseFloat($(this).closest('tr').find('td.amount').text());
   });       
   $('#total').text(total);
});
});

javascript获取表列NaN错误的总计

3 个答案: