asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
使用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 CodeCURRNEXT2005-052005-062005-072005-082005-092005-10TOTAL
应收账款RMB(￥)3344263815512177743162999
USD($)1235611158364424352312743
SUM(⊥)5564446523312366625423423
应收账款RMB(￥)5533341137487756677423932
USD($)7458866645623464574724132
SUM(⊥)3323416725607063316363578
合计RMB(￥)8877604941299992144110586931
USD($)868144777913987888927036875
SUM(⊥)888785132489194299311787001
posted on 2006-03-22 09:09 汪杰 阅读(353) 评论(0)  编辑 收藏 引用 所属分类: javascript
只有注册用户登录后才能发表评论。

<2008年2月>
日一二三四五六
272829303112
3456789
10111213141516
17181920212223
2425262728291
2345678

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 467499
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜

Copyright ©2024 汪杰 Powered By博客园 模板提供：沪江博客