javascript得到一个表列总NaN错误

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); 
}); 
}); 

我得到一个楠元件的整体。

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); 
}); 
});