JS自动合并表格

最新推荐文章于 2023-03-09 18:37:36 发布

langzhiwang888

最新推荐文章于 2023-03-09 18:37:36 发布

阅读量262

点赞数

文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/langzhiwang888/article/details/84381483

版权

js合并单元格.html

     Html代码   
     
   
<!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>  