使用js对表格进行汇总

最新推荐文章于 2026-01-07 14:53:41 发布

原创最新推荐文章于 2026-01-07 14:53:41 发布 · 1k 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

标签

#class #border #table #function #html

这篇博客介绍了如何使用JavaScript实现表格的自动汇总功能。通过获取表格中的单元格，判断带有特定‘sum’类的单元格，根据sum属性进行行或列的总计计算。代码实现了检查单元格类型、遍历并计算单元格数值以及更新汇总单元格显示的功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<META name="Author" content="Sheneyan" />

<script type="text/javascript">

//取得单元格的真正类型，去掉了sum类

function getClass(s){

return s.replace(/ sum /gi,'').replace(/^ /g,'').replace(/ $/g,'')

}

//汇总表格

function calc(tbl){

var o=document.getElementById(tbl);//取得表格对象

if (!o)return;//如果没有这个表格，退出

var tds=o.getElementsByTagName("td");//取得表格中所有的单元格

for (var i=0,td;td=tds[i];i++){//遍历单元格

if (td.className.indexOf(" sum ")>=0){//如果单元格是用来汇总的

var total=0.0;//汇总数

if (td.sum){//如果有提供自定义属性sum

var curR=td.parentNode.rowIndex;//取得列坐标

var curC=td.cellIndex;//取得行坐标

var curClass=getClass(td.className);//当前单元格的类型

if (td.sum=='row'){//以列统计,

for (var j=2,t;j < curR,t=o.rows[j].cells[curC].innerHTML;j++){//开始统计，从第三行统计过来，因为前两行是标题

if (t.length!=0&&!isNaN(t)){//如果是数字

total+=parseFloat(t);

}

}

}

else if (td.sum=='col'){//以行统计

for (var j=0,t;j < curC,t=o.rows[curR].cells[j];j++){//开始统计,从第一列统计过来

if (t.innerHTML.length!=0&&!isNaN(t.innerHTML)&&getClass(t.className)==curClass){//如果是数字而且单元格类型和汇总单元格类型一致

total+=parseFloat(t.innerHTML);

}

}

}

else

total=0;//默认是0

}

else

total=0;//默认是0

td.innerHTML=total;

}

}

//alert(tds[0].cellIndex)

//alert(tds[0].parentNode.rowIndex)

}

</script>

<style type="text/css">

table{

border:solid 1px;

border-collapse:collapse;

}

td,th{border:solid 1px;text-align:center}

td.case_num{background:#e88}

td.case_am{background:#88e}

td.sum{font-weight:bold;}

</style>

</head>

<body onload="calc('test')">

<table id="test">

<tr>

<th colspan="2">1</th>

<th colspan="2">2</th>

<th colspan="2">3</th>

<th colspan="2">4</th>

<th colspan="2">合计</th>

</tr>

<tr>

<th>数量</th>

<th>金额</th>

<th>数量</th>

<th>金额</th>

<th>数量</th>

<th>金额</th>

<th>数量</th>

<th>金额</th>

<th>数量</th>

<th>金额</th>

</tr>

<tr>

<td class="case_num">12</td>

<td class="case_am">86</td>

<td class="case_num">64</td>

<td class="case_am">17</td>

<td class="case_num">81</td>

<td class="case_am">21</td>

<td class="case_num">88</td>

<td class="case_am">44</td>

<td sum="col" class="case_num sum "></td>

<td sum="col" class="case_am sum "></td>

</tr>

<tr>

<td class="case_num">16</td>

<td class="case_am">6</td>

<td class="case_num">31</td>

<td class="case_am">40</td>

<td class="case_num">93</td>

<td class="case_am">47</td>

<td class="case_num">35.1</td>

<td class="case_am">2.4</td>

<td sum="col" class="case_num sum "></td>

<td sum="col" class="case_am sum "></td>

</tr>

<tr>

<td class="case_num">13</td>

<td class="case_am">45</td>

<td class="case_num">344</td>

<td class="case_am">4.2</td>

<td class="case_num">32</td>

<td class="case_am">467</td>

<td class="case_num">33</td>

<td class="case_am">45</td>

<td sum="col" class="case_num sum "></td>

<td sum="col" class="case_am sum "></td>

</tr>

<tr>

<td sum="row" class="case_num sum "></td>

<td sum="row" class="case_am sum "></td>

<td sum="row" class="case_num sum "></td>

<td sum="row" class="case_am sum "></td>

<td sum="row" class="case_num sum "></td>

<td sum="row" class="case_am sum "></td>

<td sum="row" class="case_num sum "></td>

<td sum="row" class="case_am sum "></td>

<td sum="row" class="case_num sum "></td>

<td sum="row" class="case_am sum "></td>

</tr>

</table>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。