指穷于为薪，火传也，不知其尽也。—《养生主》

Daily English：He is a wise man who speaks little.

使用javascript汇总表格数据

12 22 05'

Written by 子乌( Views)

0 Comments

来源：蓝色理想

作者：sheneyan

点击查看示例

Language:  Javascript
<!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
//<![CDATA[
//取得单元格的真正类型，去掉了sum类
function isClass(s,q){
  function trim(str){return str.replace(/\bsum\b/gi,'').replace(/^ /g,'').replace(/ $/g,'');}
  return trim(s)==trim(q);
}
//格式化表格，将rowspan和colspan替换成真正的单元格，但是这些单元格设置成隐藏的，便于计算
//startup:是否是初始格式化，true，将添加单元格，false，将添加的单元格干掉
function tblFormat(t,startup){
  var tds=t.getElementsByTagName("td");
  if (startup){
    for (var i=0,td;td=tds[i];i++){
      if (td.formatted)continue;
      var curR=td.parentNode.rowIndex;
      var curC=td.cellIndex;
      if (td.rowSpan&&td.rowSpan>1){
        for (var j=1;j<td.rowSpan;j++){
          var td1=document.createElement("td");
          td1.xyz="true";
          if (t.rows[curR+j]){
            with (t.rows[curR+j]){
              insertBefore(td1,cells[curC]);
            }
          }
          else{
            //如果rowspan的产生的td比实际表格还大，那就忽略
          }
        }
      }
      if (td.colSpan&&td.colSpan>1){
        for (var j=1;j<td.colSpan;j++){
          var td1=document.createElement("td");
          td1.xyz="true";
          if (td.parentNode.cells.length<(curC+j)){
            with (td.parentNode){
              var t=cells[curC+j];
              insertBefore(td1,t);
            }
          }
          else{
            td.parentNode.appendChild(td1);
          }
        }
      }
      td.formatted=true;
    }
    t.formatted=true;
  }
  else{
    var temp=new Array();
    for (var i=0,td;td=tds[i];i++){
      if (td.xyz){
        temp[temp.length]=td;
      }
      else{
        td.removeAttribute("formatted");
      }
    }
    while (temp.length>0){
      temp[0].parentNode.removeChild(temp[0]);
      temp.shift();
    }
  }
}
//汇总表格
function calc(tbl){
  var o=document.getElementById(tbl);//取得表格对象
  if (!o)return;//如果没有这个表格，退出
  if (!o.getAttribute("formatted")){
    tblFormat(o,true);
  }
  var tds=o.getElementsByTagName("td");//取得表格中所有的单元格
  for (var i=0,td;td=tds[i];i++){//遍历单元格
    if (td.className.match(/\bsum\b/g)){//如果单元格是用来汇总的
      var total=0.0;//汇总数
      var tag=td.getAttribute("scope");
      if (tag){//如果有提供自定义属性scope
        var curR=td.parentNode.rowIndex;//取得列坐标
        var curC=td.cellIndex;//取得行坐标
        var param=td.getAttribute("axis");
        if (tag=='row'){//以列统计
          for (var j=param,t;j < curR;j++){//开始统计，从第param行统计过来
            t=o.rows[j].cells[curC];
            if (t.innerHTML.length!=0&&!isNaN(t.innerHTML)&&isClass(t.className,td.className)){//如果是数字
              total+=parseFloat(t.innerHTML);
            }
          }
        }
        else if (tag=='col'){//以行统计
          for (var j=param,t;j < curC;j++){//开始统计,从第param列统计过来
			t=o.rows[curR].cells[j];
            if (t.innerHTML.length!=0&&!isNaN(t.innerHTML)&&isClass(t.className,td.className)){//如果是数字而且单元格类型和汇总单元格类型一致
              total+=parseFloat(t.innerHTML);
            }
          }         
        }
        else
          total=0;//默认是0
      }
      else
        total=0;//默认是0
      td.innerHTML=total;
    }
  }
  tblFormat(o,false);
}
//]]>
</script>
<style type="text/css">
table{
background:#ddd;
margin:10px 0 0;
border:solid 1px;
border-collapse:collapse;
}
td,th{border:solid 1px;text-align:center}
th{background:#d1e9fe}
td.sum1{background:#ccf}
td.usd{background:#ffecff}
td.rmb{background:#ececec}
td.sum{background:#ddf}
</style>
</head>
<body onload="calc('test')">
<table id="test">
<tr>
<th>Account Code</th>
<th>CURR</th>
<th>NEXT</th>
<th>2005-05</th>
<th>2005-06</th>
<th>2005-07</th>
<th>2005-08</th>
<th>2005-09</th>
<th>2005-10</th>
<th>TOTAL</th>
</tr>
<tr>
<td rowspan="3">应收账款</td>
<td>RMB(￥)</td>
<td class="rmb">334</td>
<td class="rmb">426</td>
<td class="rmb">381</td>
<td class="rmb">551</td>
<td class="rmb">217</td>
<td class="rmb">774</td>
<td class="rmb">316</td>
<td class="rmb sum" axis="2" scope="col"></td>
</tr>
<tr>
<td>USD($)</td>
<td class="usd">123</td>
<td class="usd">561</td>
<td class="usd">115</td>
<td class="usd">836</td>
<td class="usd">442</td>
<td class="usd">435</td>
<td class="usd">231</td>
<td class="usd sum" axis="2" scope="col"></td>
</tr>
<tr>
<td>SUM(⊥)</td>
<td class="sum1">556</td>
<td class="sum1">444</td>
<td class="sum1">652</td>
<td class="sum1">331</td>
<td class="sum1">236</td>
<td class="sum1">662</td>
<td class="sum1">542</td>
<td class="sum1 sum" axis="2" scope="col"></td>
</tr>
<tr>
<td rowspan="3">应收账款</td>
<td>RMB(￥)</td>
<td class="rmb">553</td>
<td class="rmb">334</td>
<td class="rmb">113</td>
<td class="rmb">748</td>
<td class="rmb">775</td>
<td class="rmb">667</td>
<td class="rmb">742</td>
<td class="rmb sum" axis="2" scope="col"></td>
</tr>
<tr>
<td>USD($)</td>
<td class="usd">745</td>
<td class="usd">886</td>
<td class="usd">664</td>
<td class="usd">562</td>
<td class="usd">346</td>
<td class="usd">457</td>
<td class="usd">472</td>
<td class="usd sum" axis="2" scope="col"></td>
</tr>
<tr>
<td>SUM(⊥)</td>
<td class="sum1">332</td>
<td class="sum1">341</td>
<td class="sum1">672</td>
<td class="sum1">560</td>
<td class="sum1">706</td>
<td class="sum1">331</td>
<td class="sum1">636</td>
<td class="sum1 sum" axis="2" scope="col"></td>
</tr>
<tr>
<td rowspan="3">合计</td>
<td>RMB(￥)</td>
<td class="rmb sum" axis="1" scope="row"></td>
<td class="rmb sum" axis="1" scope="row"></td>
<td class="rmb sum" axis="1" scope="row"></td>
<td class="rmb sum" axis="1" scope="row"></td>
<td class="rmb sum" axis="1" scope="row"></td>
<td class="rmb sum" axis="1" scope="row"></td>
<td class="rmb sum" axis="1" scope="row"></td>
<td class="rmb sum" axis="1" scope="row"></td>
</tr>
<tr>
<td>USD($)</td>
<td class="usd sum" axis="1" scope="row"></td>
<td class="usd sum" axis="1" scope="row"></td>
<td class="usd sum" axis="1" scope="row"></td>
<td class="usd sum" axis="1" scope="row"></td>
<td class="usd sum" axis="1" scope="row"></td>
<td class="usd sum" axis="1" scope="row"></td>
<td class="usd sum" axis="1" scope="row"></td>
<td class="usd sum" axis="1" scope="row"></td>
</tr>
<tr>
<td>SUM(⊥)</td>
<td class="sum1 sum" axis="1" scope="row"></td>
<td class="sum1 sum" axis="1" scope="row"></td>
<td class="sum1 sum" axis="1" scope="row"></td>
<td class="sum1 sum" axis="1" scope="row"></td>
<td class="sum1 sum" axis="1" scope="row"></td>
<td class="sum1 sum" axis="1" scope="row"></td>
<td class="sum1 sum" axis="1" scope="row"></td>
<td class="sum1 sum" axis="1" scope="row"></td>
</tr>
</table>
</body>
</html>
Account Code CURR NEXT 2005-05 2005-06 2005-07 2005-08 2005-09 2005-10 TOTAL
应收账款 RMB(￥) 334 426 381 551 217 774 316
USD($) 123 561 115 836 442 435 231
SUM(⊥) 556 444 652 331 236 662 542
应收账款 RMB(￥) 553 334 113 748 775 667 742
USD($) 745 886 664 562 346 457 472
SUM(⊥) 332 341 672 560 706 331 636
合计 RMB(￥)
USD($)
SUM(⊥)


代码更新：2005-12-22 20:16:21
现在的代码支持rowspan和colspan了，原来的代码不支持。

分享家:Addthis中国

Category:

技术

Tagged with:

收藏文章到Evernote：Clip to Evernote

你可能对这些也感兴趣

Leave a comment for: "使用javascript汇总表格数据"

验证图片
*

Tag Cloud