JS自动合并表格

时间：2022-03-22 20:12:32
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

 <head>

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

 <title>JS合并表格</title>

 <style>

 * {

     font-size:12px

 }

 table{ margin-top:5px;}

 .table1 {

     border-collapse:collapse;

     width:600px;

     border:1px solid #7A90A8;

     border-top:3px;

 }

 td {

 padding-left:3px;

 text-align:left;

 }

 caption{

 background:#9DACBF;

 font-weight:600;

 padding:4px;

 color:#FFF; }

 </style>

 </head>

 <body>

 <table id="ii" class="table1" border="1" align="center">

 <caption>2010年北京市医院分布情况</caption>

   <tr>

     <td>所在区</td>

     <td>二级医院数量</td>

     <td>三级医院数量</td>

     <td>三甲级医院数量</td>

     <td>四级医院数量</td>

   </tr>

   <tr>

     <td>海淀区</td>

     <td>8</td>

     <td>54</td>

     <td>14</td>

     <td>8</td>

   </tr>

   <tr>

     <td>海淀区</td>

     <td>15</td>

     <td>64</td>

     <td>36</td>

     <td>76</td>

   </tr>

   <tr>

     <td>朝阳区</td>

     <td>5</td>

     <td>64</td>

     <td>69</td>

     <td>23</td>

   </tr>

   <tr>

     <td>朝阳区</td>

     <td>17</td>

     <td>54</td>

     <td>43</td>

     <td>18</td>

   </tr>

   <tr>

     <td>朝阳区</td>

     <td>73</td>

     <td>35</td>

     <td>45</td>

     <td>72</td>

   </tr>

 </table>

 <script type="text/javascript">

 function tableSpan(tb1)

 {

     //合并行

     //列

     for(var i=tb1.rows[0].childNodes.length-1;i>=0;i--)

     {

         //行

         for(var j=tb1.rows.length-1;j>0;j--)

         {

             //当前单元格与上一单元格比较

             if(tb1.rows[j].childNodes[i].innerHTML==tb1.rows[j-1].childNodes[i].innerHTML)

             {

                 tb1.rows[j-1].childNodes[i].rowSpan += tb1.rows[j].childNodes[i].rowSpan;

                 tb1.rows[j].removeChild(tb1.rows[j].childNodes[i]);

             }

         }

     }

     //合并列

     //行

     for(var i=tb1.rows.length-1;i>=0;i--)

     {   break;//不合并列

         //列

         for(var j=tb1.rows[i].childNodes.length-1;j>0;j--)

         {

             //当前单元格与左一单元格比较

             if(tb1.rows[i].childNodes[j].innerHTML==tb1.rows[i].childNodes[j-1].innerHTML)

             {

                 tb1.rows[i].childNodes[j-1].colSpan += tb1.rows[i].childNodes[j].colSpan;

                 tb1.rows[i].removeChild(tb1.rows[i].childNodes[j]);

             }

         }

     }

 }

 tableSpan(ii);

 </script>

 </body>

 </html>

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

相关文章