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年北京市医院分布情况
所在区二级医院数量三级医院数量三甲级医院数量四级医院数量
海淀区854148
15643676
朝阳区56923
17544318
73354572
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值