JS自动合并表格

最新推荐文章于 2022-09-09 15:11:11 发布

iteye_1512

最新推荐文章于 2022-09-09 15:11:11 发布

阅读量214

点赞数 1

分类专栏： WEB前台文章标签： J# JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/iteye_1512/article/details/81819333

版权

WEB前台专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

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