码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现的统计table表格指定列的单元格值的和

时间:2016-02-12 16:15:59      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:

jquery实现的统计t]able表格指定列的单元格值的和:
在一些应用中,表格单元格中存放的都是数字,比如学生的分数,那么就有可能将这些分数做加法运算来统计出总分数,下面就通过代码实例介绍一下如何统计某一列单元格中值的和。
代码实例:

<!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()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15141

更多内容可以参阅:http://www.softwhy.com/jquery/

jquery实现的统计table表格指定列的单元格值的和

标签:

原文地址:http://www.cnblogs.com/xiaofinder/p/5187077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!