jquery統計表格指定列的單元格值的和

admin發表於2017-10-27
jQuery

在一些應用中，表格單元格中存放的都是數字，比如學生的分數，那麼就有可能將這些分數做加法運算來統計出總分數，下面就通過程式碼例項介紹一下如何統計某一列單元格中值的和。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  var totalRow=0 
  $('#mytable tr').each(function(){ 
    $(this).find('td:eq(2)').each(function(){ 
    totalRow += parseFloat($(this).text()); 
  }); 
}); 
$('#totalRow').append('<td>合計</td><td></td><td>'+totalRow+'</td><td></td>'); 
}); 
</script>
</head>
<body>
<table id="mytable" border="1" width="37%">
  <thead>
  </thead>
  <tr>
    <td width="63" >11</td>
    <td width="68" >12</td>
    <td width="62" >13</td>
    <td width="75" >14</td>
  </tr>
  <tr>
    <td width="63" >21</td>
    <td width="68" >22</td>
    <td width="62" >23</td>
    <td width="75" >24</td>
  </tr>
  <tr id="totalRow"></tr>
</table>
</body>
</html>

能夠統計出第三列單元格中值的和，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，dom結構完全載入完畢再去執行函式中的程式碼。

（2）.var totalRow=0，宣告一個變數用來存放計算和的值。

（3）.$('#mytable tr').each(function(){})，遍歷表格的每一個tr行。

（4）.$(this).find('td:eq(2)').each(function(){totalRow+=parseFloat($(this).text());})，獲取當前行索引值為2的單元格，並且再使用each()函式進行遍歷，並將單元格中的數字內容進行累加計算。可能很多朋友有這樣的疑問，為什麼不直接使用$(this).find('td:eq(2)')進行計算，就一個單元格還需要使用each()函式進行遍歷嗎，其實還是有必要的，因為最後一個tr是沒有td單元格的，這樣的話text()函式返回值就是空，那麼parseFloat()轉換的話就會返回NaN值，最終計算結果可能出錯，但是如果使用each()進行遍歷，由於最後tr行沒有td單元格，那麼就不執行函式，也就避免上面的問題。

（5）.$('#totalRow').append('<td>合計</td><td></td><td>'+totalRow+'</td><td></td>')，動態新增tr中的內容。

二.相關閱讀:

（1）.each()參閱jQuery each()方法一章節。

（2）.find()參閱jQuery find()方法一章節。 

（3）.parseFloat()參閱JavaScript parseFloat()方法一章節。

（4）.append()參閱jQuery append()方法一章節。

相關文章