代码改变世界

JS自动合并表格

2015-01-16 16:20  ko绝缘体  阅读(232)  评论(0)  编辑  收藏  举报 
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>JS合并表格</title>
  6 <style>
  7 * {
  8     font-size:12px
  9 }
 10 
 11 table{ margin-top:5px;}
 12 
 13 .table1 {
 14     border-collapse:collapse;
 15     width:600px;
 16     border:1px solid #7A90A8;
 17     border-top:3px;
 18 }
 19 td {
 20 padding-left:3px;
 21 text-align:left;
 22 }
 23 
 24 caption{
 25 background:#9DACBF;
 26 font-weight:600;
 27 padding:4px;
 28 color:#FFF; }
 29 </style>
 30 </head>
 31 
 32 <body>
 33 
 34 <table id="ii" class="table1" border="1" align="center">
 35 <caption>2010年北京市医院分布情况</caption>
 36   <tr>
 37     <td>所在区</td>
 38     <td>二级医院数量</td>
 39     <td>三级医院数量</td>
 40     <td>三甲级医院数量</td>
 41     <td>四级医院数量</td>
 42   </tr>
 43   <tr>
 44     <td>海淀区</td>
 45     <td>8</td>
 46     <td>54</td>
 47     <td>14</td>
 48     <td>8</td>
 49   </tr>
 50   <tr>
 51     <td>海淀区</td>
 52     <td>15</td>
 53     <td>64</td>
 54     <td>36</td>
 55     <td>76</td>
 56   </tr>
 57   <tr>
 58     <td>朝阳区</td>
 59     <td>5</td>
 60     <td>64</td>
 61     <td>69</td>
 62     <td>23</td>
 63   </tr>
 64   <tr>
 65     <td>朝阳区</td>
 66     <td>17</td>
 67     <td>54</td>
 68     <td>43</td>
 69     <td>18</td>
 70   </tr>
 71   <tr>
 72     <td>朝阳区</td>
 73     <td>73</td>
 74     <td>35</td>
 75     <td>45</td>
 76     <td>72</td>
 77   </tr>
 78 </table>
 79 
 80 
 81 
 82 <script type="text/javascript">
 83 function tableSpan(tb1)
 84 {
 85     //合并行
 86     //列
 87     for(var i=tb1.rows[0].childNodes.length-1;i>=0;i--)
 88     {
 89         //行
 90         for(var j=tb1.rows.length-1;j>0;j--)
 91         {
 92             //当前单元格与上一单元格比较
 93             if(tb1.rows[j].childNodes[i].innerHTML==tb1.rows[j-1].childNodes[i].innerHTML)
 94             {
 95                 tb1.rows[j-1].childNodes[i].rowSpan += tb1.rows[j].childNodes[i].rowSpan;
 96                 tb1.rows[j].removeChild(tb1.rows[j].childNodes[i]);
 97             }
 98         }
 99     }
100     
101     //合并列
102     //行
103     for(var i=tb1.rows.length-1;i>=0;i--)
104     {   break;//不合并列
105         //列
106         for(var j=tb1.rows[i].childNodes.length-1;j>0;j--)
107         {
108             //当前单元格与左一单元格比较
109             if(tb1.rows[i].childNodes[j].innerHTML==tb1.rows[i].childNodes[j-1].innerHTML)
110             {
111                 tb1.rows[i].childNodes[j-1].colSpan += tb1.rows[i].childNodes[j].colSpan;
112                 tb1.rows[i].removeChild(tb1.rows[i].childNodes[j]);
113             }
114         }
115     }
116 }
117 tableSpan(ii);
118 </script>
119 </body>
120 </html>
View Code

 

   今天看到一个博客，觉得里面代码跟想法不错，故将dsna的代码保留在这里，谢谢！