使⽤js简单实现table的合计功能，很实⽤。 现在很多的项⽬中都需要对table进⾏合计的功能。在这⾥分享下我的⽅法。
页⾯是使⽤layUI简单制作的table，贴下jsp页⾯
<table class="layui-table" id="testTable">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>单位名称</th>
<th>部门1⼈数</th>
<th>部门2⼈数</th>
<th>部门3⼈数</th>
</tr>
</thead>
<tbody>
<tr>
<td>单位1</td>
<td>13</td>
<td>12</td>
<td>34</td>
</tr>
<tr>
<td>单位2</td>
<td>34</td>
<td>12</td>
<td>34</td>
</tr>
<tr>
<td>单位3</td>
<td>34</td>
<td>12</td>
<td>0</td>
</tr>
<tr>
<td>单位4</td>
<td>23</td>
<td>45</td>
<td>23</td>
</tr>
<tr>
<td>单位5</td>
<td>3</td>
<td>45</td>
<td>0 </td>
js制作简单的焦点图效果</tr>
<tr>
<td>单位5</td>
<td>3</td>
<td>45</td>
<td>0 </td>
</tr>
<tr class="count">
</tr>
</tbody>
</table>
页⾯最后添加了⼀个空⾏⽤来做页⾯的合计功能，使⽤js来计算⾏列。
$(function(){
var ElementById("testTable");//获取table对象
var ws;//获取⾏对象
var lls;//获取列对象
var colums = ws[0].cells.length;//获取列数
$(".count").empty();//每次加载时清空最后⼀列，防⽌⼆次加载数据时出现多⾏合计
$(".count").append("<td>合计</td>");
//这⾥从列开始遍历，得到的就是每⼀列的数据
//如果从⾏开始遍历，得到的就是每⾏的数据
for(var j=1;j<colums;j++){
var sum=0;
for(var i=1;i<rows.length-1;i++){//从i=1第⼆⾏开始去掉表头，rows.length-1结束，去掉合计⾏  var a =parseInt(rows[i].cells[j].im());//获取每⼀列的值
sum=sum+a; //计算
}
$(".count").append("<td>"+sum+"</td>");//给最后⼀⾏添加计算结果列
}
});
原创，转载请注明出处

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。