劳动是一切知识的源泉。 —— 陶铸
到底部
返回文章列表

使用javascript汇总表格数据

来源：蓝色理想外链

作者：sheneyan

Language：javascript, parsed in: 0.086 seconds, using GeSHi 1.0.7.12
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>test</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <meta name="Author" content="Sheneyan" />
  7. <script type="text/javascript">
  8. //<![CDATA[
  9. //取得单元格的真正类型，去掉了sum类
  10. function isClass(s,q){
  11.   function trim(str){return str.replace(/\bsum\b/gi,'').replace(/^ /g,'').replace(/ $/g,'');}
  12.   return trim(s)==trim(q);
  13. }
  14. //格式化表格，将rowspan和colspan替换成真正的单元格，但是这些单元格设置成隐藏的，便于计算
  15. //startup:是否是初始格式化，true，将添加单元格，false，将添加的单元格干掉
  16. function tblFormat(t,startup){
  17.   var tds=t.getElementsByTagName("td");
  18.   if (startup){
  19.     for (var i=0,td;td=tds[i];i++){
  20.       if (td.formatted)continue;
  21.       var curR=td.parentNode.rowIndex;
  22.       var curC=td.cellIndex;
  23.       if (td.rowSpan&&td.rowSpan>1){
  24.         for (var j=1;j<td.rowSpan;j++){
  25.           var td1=document.createElement("td");
  26.           td1.xyz="true";
  27.           if (t.rows[curR+j]){
  28.             with (t.rows[curR+j]){
  29.               insertBefore(td1,cells[curC]);
  30.             }
  31.           }
  32.           else{
  33.             //如果rowspan的产生的td比实际表格还大，那就忽略
  34.           }
  35.         }
  36.       }
  37.       if (td.colSpan&&td.colSpan>1){
  38.         for (var j=1;j<td.colSpan;j++){
  39.           var td1=document.createElement("td");
  40.           td1.xyz="true";
  41.           if (td.parentNode.cells.length<(curC+j)){
  42.             with (td.parentNode){
  43.               var t=cells[curC+j];
  44.               insertBefore(td1,t);
  45.             }
  46.           }
  47.           else{
  48.             td.parentNode.appendChild(td1);
  49.           }
  50.         }
  51.       }
  52.       td.formatted=true;
  53.     }
  54.     t.formatted=true;
  55.   }
  56.   else{
  57.     var temp=new Array();
  58.     for (var i=0,td;td=tds[i];i++){
  59.       if (td.xyz){
  60.         temp[temp.length]=td;
  61.       }
  62.       else{
  63.         td.removeAttribute("formatted");
  64.       }
  65.     }
  66.     while (temp.length>0){
  67.       temp[0].parentNode.removeChild(temp[0]);
  68.       temp.shift();
  69.     }
  70.   }
  71. }
  72. //汇总表格
  73. function calc(tbl){
  74.   var o=document.getElementById(tbl);//取得表格对象
  75.   if (!o)return;//如果没有这个表格，退出
  76.   if (!o.getAttribute("formatted")){
  77.     tblFormat(o,true);
  78.   }
  79.   var tds=o.getElementsByTagName("td");//取得表格中所有的单元格
  80.   for (var i=0,td;td=tds[i];i++){//遍历单元格
  81.     if (td.className.match(/\bsum\b/g)){//如果单元格是用来汇总的
  82.       var total=0.0;//汇总数
  83.       var tag=td.getAttribute("scope");
  84.       if (tag){//如果有提供自定义属性scope
  85.         var curR=td.parentNode.rowIndex;//取得列坐标
  86.         var curC=td.cellIndex;//取得行坐标
  87.         var param=td.getAttribute("axis");
  88.         if (tag=='row'){//以列统计
  89.           for (var j=param,t;j < curR;j++){//开始统计，从第param行统计过来
  90.             t=o.rows[j].cells[curC];
  91.             if (t.innerHTML.length!=0&&!isNaN(t.innerHTML)&&isClass(t.className,td.className)){//如果是数字
  92.               total+=parseFloat(t.innerHTML);
  93.             }
  94.           }
  95.         }
  96.         else if (tag=='col'){//以行统计
  97.           for (var j=param,t;j < curC;j++){//开始统计,从第param列统计过来
  98.                         t=o.rows[curR].cells[j];
  99.             if (t.innerHTML.length!=0&&!isNaN(t.innerHTML)&&isClass(t.className,td.className)){//如果是数字而且单元格类型和汇总单元格类型一致
  100.               total+=parseFloat(t.innerHTML);
  101.             }
  102.           }         
  103.         }
  104.         else
  105.           total=0;//默认是0
  106.       }
  107.       else
  108.         total=0;//默认是0
  109.       td.innerHTML=total;
  110.     }
  111.   }
  112.   tblFormat(o,false);
  113. }
  114. //]]>
  115. </script>
  116. <style type="text/css">
  117. table{
  118. background:#ddd;
  119. margin:10px 0 0;
  120. border:solid 1px;
  121. border-collapse:collapse;
  122. }
  123. td,th{border:solid 1px;text-align:center}
  124. th{background:#d1e9fe}
  125. td.sum1{background:#ccf}
  126. td.usd{background:#ffecff}
  127. td.rmb{background:#ececec}
  128. td.sum{background:#ddf}
  129. </style>
  130. </head>
  131. <body onload="calc('test')">
  132. <table id="test">
  133. <tr>
  134. <th>Account Code</th>
  135. <th>CURR</th>
  136. <th>NEXT</th>
  137. <th>2005-05</th>
  138. <th>2005-06</th>
  139. <th>2005-07</th>
  140. <th>2005-08</th>
  141. <th>2005-09</th>
  142. <th>2005-10</th>
  143. <th>TOTAL</th>
  144. </tr>
  145. <tr>
  146. <td rowspan="3">应收账款</td>
  147. <td>RMB(￥)</td>
  148. <td class="rmb">334</td>
  149. <td class="rmb">426</td>
  150. <td class="rmb">381</td>
  151. <td class="rmb">551</td>
  152. <td class="rmb">217</td>
  153. <td class="rmb">774</td>
  154. <td class="rmb">316</td>
  155. <td class="rmb sum" axis="2" scope="col"></td>
  156. </tr>
  157. <tr>
  158. <td>USD($)</td>
  159. <td class="usd">123</td>
  160. <td class="usd">561</td>
  161. <td class="usd">115</td>
  162. <td class="usd">836</td>
  163. <td class="usd">442</td>
  164. <td class="usd">435</td>
  165. <td class="usd">231</td>
  166. <td class="usd sum" axis="2" scope="col"></td>
  167. </tr>
  168. <tr>
  169. <td>SUM(⊥)</td>
  170. <td class="sum1">556</td>
  171. <td class="sum1">444</td>
  172. <td class="sum1">652</td>
  173. <td class="sum1">331</td>
  174. <td class="sum1">236</td>
  175. <td class="sum1">662</td>
  176. <td class="sum1">542</td>
  177. <td class="sum1 sum" axis="2" scope="col"></td>
  178. </tr>
  179. <tr>
  180. <td rowspan="3">应收账款</td>
  181. <td>RMB(￥)</td>
  182. <td class="rmb">553</td>
  183. <td class="rmb">334</td>
  184. <td class="rmb">113</td>
  185. <td class="rmb">748</td>
  186. <td class="rmb">775</td>
  187. <td class="rmb">667</td>
  188. <td class="rmb">742</td>
  189. <td class="rmb sum" axis="2" scope="col"></td>
  190. </tr>
  191. <tr>
  192. <td>USD($)</td>
  193. <td class="usd">745</td>
  194. <td class="usd">886</td>
  195. <td class="usd">664</td>
  196. <td class="usd">562</td>
  197. <td class="usd">346</td>
  198. <td class="usd">457</td>
  199. <td class="usd">472</td>
  200. <td class="usd sum" axis="2" scope="col"></td>
  201. </tr>
  202. <tr>
  203. <td>SUM(⊥)</td>
  204. <td class="sum1">332</td>
  205. <td class="sum1">341</td>
  206. <td class="sum1">672</td>
  207. <td class="sum1">560</td>
  208. <td class="sum1">706</td>
  209. <td class="sum1">331</td>
  210. <td class="sum1">636</td>
  211. <td class="sum1 sum" axis="2" scope="col"></td>
  212. </tr>
  213. <tr>
  214. <td rowspan="3">合计</td>
  215. <td>RMB(￥)</td>
  216. <td class="rmb sum" axis="1" scope="row"></td>
  217. <td class="rmb sum" axis="1" scope="row"></td>
  218. <td class="rmb sum" axis="1" scope="row"></td>
  219. <td class="rmb sum" axis="1" scope="row"></td>
  220. <td class="rmb sum" axis="1" scope="row"></td>
  221. <td class="rmb sum" axis="1" scope="row"></td>
  222. <td class="rmb sum" axis="1" scope="row"></td>
  223. <td class="rmb sum" axis="1" scope="row"></td>
  224. </tr>
  225. <tr>
  226. <td>USD($)</td>
  227. <td class="usd sum" axis="1" scope="row"></td>
  228. <td class="usd sum" axis="1" scope="row"></td>
  229. <td class="usd sum" axis="1" scope="row"></td>
  230. <td class="usd sum" axis="1" scope="row"></td>
  231. <td class="usd sum" axis="1" scope="row"></td>
  232. <td class="usd sum" axis="1" scope="row"></td>
  233. <td class="usd sum" axis="1" scope="row"></td>
  234. <td class="usd sum" axis="1" scope="row"></td>
  235. </tr>
  236. <tr>
  237. <td>SUM(⊥)</td>
  238. <td class="sum1 sum" axis="1" scope="row"></td>
  239. <td class="sum1 sum" axis="1" scope="row"></td>
  240. <td class="sum1 sum" axis="1" scope="row"></td>
  241. <td class="sum1 sum" axis="1" scope="row"></td>
  242. <td class="sum1 sum" axis="1" scope="row"></td>
  243. <td class="sum1 sum" axis="1" scope="row"></td>
  244. <td class="sum1 sum" axis="1" scope="row"></td>
  245. <td class="sum1 sum" axis="1" scope="row"></td>
  246. </tr>
  247. </table>
  248. </body>
  249. </html>
  250.  
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了，原来的代码不支持。

到顶部