JS自动合并表格

langzhiwang888

浏览: 182100 次
性别:
来自: 青岛

最近访客更多访客>>

xubbsun

luckyhan0218

zihai367

logcy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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>  

合并效果，将所在区相邻且字符同的都合并了

2010年北京市医院分布情况

所在区	二级医院数量	三级医院数量	三甲级医院数量	四级医院数量
海淀区	8	54	14	8
15	64	36	76
朝阳区	5	69	23
17	54	43	18
73	35	45	72

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档 </title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

window.onload = function(){

var tab = document.getElementById("tab");

var maxCol = 3, val, count, start;

for(var col = maxCol-1; col >= 0 ; col--){

count = 1;

val = "";

for(var i=0; i<tab.rows.length; i++){

if(val == tab.rows[i].cells[col].innerHTML){

count++;

}else{

if(count > 1){ //合并

start = i - count;

tab.rows[start].cells[col].rowSpan = count;

for(var j=start+1; j<i; j++){

tab.rows[j].cells[col].style.display = "none";

}

count = 1;

}

val = tab.rows[i].cells[col].innerHTML;

}

if(count > 1 ){ //合并，最后几行相同的情况下

start = i - count;

tab.rows[start].cells[col].rowSpan = count;

for(var j=start+1; j<i; j++){

tab.rows[j].cells[col].style.display = "none";

}

};

</script>

</body>

</html>

分享到：

trim(str) | <c:forEach>标签的使用

2013-01-15 10:28
浏览 1168
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论