JS自动归拢表格-JavaSript-爱易网页

JS自动归拢表格

日期：2014-05-16　浏览次数：20555 次

JS自动合并表格

js合并单元格.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

1 楼 hite 2010-01-21

我有个加强版本的，左依赖的合并
http://hite.iteye.com/admin/blogs/545803

2 楼 liang蜗牛 2011-10-31

DJ ,,,如果我想只让第一行除了第一列外地单元格变色怎么办？能实现么？

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS自动归拢表格

相关资料更多>

推荐阅读更多>