JS自动合龙表格 _JavaScript

JS自动合并表格

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">?

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

<head>?

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

</head>?

<body>?

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">?

? <tr>?

? ? <td>张三 </td>?

? ? <td>男 </td>?

? ? <td>22 </td>?

? ? <td>数学 </td>?

? ? <td>90 </td>?

? </tr>?

? ?<tr>?

? ? <td>张三 </td>?

? ? <td>男 </td>?

? ? <td>22 </td>?

? ? <td>数学 </td>?

? ? <td>90 </td>?

? </tr>?

? <tr>?

? ? <td>张三 </td>?

? ? <td>男 </td>?

? ? <td>22 </td>?

? ? <td>语文 </td>?

? ? <td>70 </td>?

? </tr>?

? <tr>?

? ? <td>张三 </td>?

? ? <td>女 </td>?

? ? <td>22 </td>?

? ? <td>英语 </td>?

? ? <td>60 </td>?

? </tr>?

? <tr>?

? ? <td>李四 </td>?

? ? <td>女 </td>?

? ? <td>22 </td>?

? ? <td>数学 </td>?

? ? <td>60 </td>?

? </tr>?

? <tr>?

? ? <td>李四 </td>?

? ? <td>女 </td>?

? ? <td>19 </td>?

? ? <td>语文 </td>?

? ? <td>60 </td>?

? </tr>?

? <tr>?

? ? <td>王五 </td>?

? ? <td>男 </td>?

? ? <td>19 </td>?

? ? <td>英语 </td>?

? ? <td>60 </td>?

? </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>