合并表格第一列

最新推荐文章于 2023-09-25 15:24:06 发布

yunsyz

最新推荐文章于 2023-09-25 15:24:06 发布

阅读量2.3k

点赞数 1

分类专栏： js html 文章标签： html js table 表格合并

本文链接：https://blog.csdn.net/yunsyz/article/details/43016663

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

最近老是遇见第一列是地市，第二列是区县。说一堆区县对应一个地市看起来不太好看，要把第一列的地市合并在一起。故写了个小小的Demo，留待以后复用。

先看效果图，表一为原数据效果，表二为合并第一列后的数据效果：

核心代码为一小段js：

<script type="text/javascript">
	window.onload = function () {
      mergeTable("tt2",0,1);
  };
  /* tableId:表格的ID,mergeColIndex:需要合并的列序号,beginRowIndex:合并开始的行序号 */
  function mergeTable(tableId,mergeColIndex,beginRowIndex){
  	var table = document.getElementById(tableId);
  	if(table!=null){
  		var totalRows = table.rows.length;
  		for(var i=beginRowIndex;i<totalRows;i++){
  			var rowSpan = 1;
  			var cell = table.rows[i].cells[mergeColIndex].innerHTML;
  			for(var j=i+1;j<totalRows;j++){
  				if(table.rows[j].cells[mergeColIndex].innerHTML==cell){
  					rowSpan++;
  					table.rows[i].cells[mergeColIndex].rowSpan = rowSpan;//设置rowSpan
  					table.rows[j].cells[mergeColIndex].style.display = "none";//当前行被合并了，所以这里设置为none
  				}else{
  					break;
  				}
  			}
  			i = i+rowSpan-1;//跳到最后一个相同的行，然后再+1就是另一个不相同的行啦
  		}
  	}
  }
</script>

下面是我的静态html代码，可以直接复制下来，放到文本文件中，然后保存为.html文件，就可以直接打开看效果啦。

<!DOCTYPE HTML>
<html>
<head>
	<title>mergeTable</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta name="author" content="yunsyz"/>
	<meta name="revised" content="2015-01-22" sechema="YYYY-MM-DD"/>
	<meta http-equiv="Refresh" content="60;url=http://blog.csdn.net/yunsyz/article/details/43016663"/>
	<style type="text/css">
		.mergeTable{width:100%;border:1px solid;border-collapse:collapse;table-layout:fixed;}
		.mergeTable th,.mergeTable td{border:1px solid;text-align:center;}
	</style>
</head>
<body>
<div>
	<h4>表一</h4>
	<table id="tt1" class="mergeTable">
		<thead>
			<tr>
				<th>地市</th>
				<th>区县</th>
				<th>本月值</th>
				<th>上月值</th>
				<th>环比</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>武汉</td>
				<td>汉口</td>
				<td>45.34</td>
				<td>65.78</td>
				<td>22.03%</td>
			</tr>
			<tr>
				<td>武汉</td>
				<td>武昌</td>
				<td>55.34</td>
				<td>75.78</td>
				<td>32.03%</td>
			</tr>
			<tr>
				<td>武汉</td>
				<td>汉阳</td>
				<td>65.34</td>
				<td>85.78</td>
				<td>42.03%</td>
			</tr>
			<tr>
				<td>上海</td>
				<td>浦东</td>
				<td>56.11</td>
				<td>48.87</td>
				<td>0.34%</td>
			</tr>
			<tr>
				<td>上海</td>
				<td>城区</td>
				<td>65.11</td>
				<td>43.87</td>
				<td>1.34%</td>
			</tr>
			<tr>
				<td>重庆</td>
				<td>城区</td>
				<td>54.00</td>
				<td>32.90</td>
				<td>10.00%</td>
			</tr>
			<tr>
				<td>北京</td>
				<td>二环</td>
				<td>73.77</td>
				<td>21.34</td>
				<td>42.46%</td>
			</tr>
			<tr>
				<td>北京</td>
				<td>三环</td>
				<td>55.77</td>
				<td>17.34</td>
				<td>165.46%</td>
			</tr>
		</tbody>
	</table>
	<h4>表二</h4>
	<table id="tt2" class="mergeTable">
		<thead>
			<tr>
				<th>地市</th>
				<th>区县</th>
				<th>本月值</th>
				<th>上月值</th>
				<th>环比</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>武汉</td>
				<td>汉口</td>
				<td>45.34</td>
				<td>65.78</td>
				<td>22.03%</td>
			</tr>
			<tr>
				<td>武汉</td>
				<td>武昌</td>
				<td>55.34</td>
				<td>75.78</td>
				<td>32.03%</td>
			</tr>
			<tr>
				<td>武汉</td>
				<td>汉阳</td>
				<td>65.34</td>
				<td>85.78</td>
				<td>42.03%</td>
			</tr>
			<tr>
				<td>上海</td>
				<td>浦东</td>
				<td>56.11</td>
				<td>48.87</td>
				<td>0.34%</td>
			</tr>
			<tr>
				<td>上海</td>
				<td>城区</td>
				<td>65.11</td>
				<td>43.87</td>
				<td>1.34%</td>
			</tr>
			<tr>
				<td>重庆</td>
				<td>城区</td>
				<td>54.00</td>
				<td>32.90</td>
				<td>10.00%</td>
			</tr>
			<tr>
				<td>北京</td>
				<td>二环</td>
				<td>73.77</td>
				<td>21.34</td>
				<td>42.46%</td>
			</tr>
			<tr>
				<td>北京</td>
				<td>三环</td>
				<td>55.77</td>
				<td>17.34</td>
				<td>165.46%</td>
			</tr>
		</tbody>
	</table>
</div>
<script type="text/javascript">
	window.onload = function () {
      mergeTable("tt2",0,1);
  };
  /* tableId:表格的ID,mergeColIndex:需要合并的列序号,beginRowIndex:合并开始的行序号 */
  function mergeTable(tableId,mergeColIndex,beginRowIndex){
  	var table = document.getElementById(tableId);
  	if(table!=null){
  		var totalRows = table.rows.length;
  		for(var i=beginRowIndex;i<totalRows;i++){
  			var rowSpan = 1;
  			var cell = table.rows[i].cells[mergeColIndex].innerHTML;
  			for(var j=i+1;j<totalRows;j++){
  				if(table.rows[j].cells[mergeColIndex].innerHTML==cell){
  					rowSpan++;
  					table.rows[i].cells[mergeColIndex].rowSpan = rowSpan;//设置rowSpan
  					table.rows[j].cells[mergeColIndex].style.display = "none";//当前行被合并了，所以这里设置为none
  				}else{
  					break;
  				}
  			}
  			i = i+rowSpan-1;//跳到最后一个相同的行，然后再+1就是另一个不相同的行啦
  		}
  	}
  }
</script>
</body>
</html>

yunsyz

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
合并表格第一列

最近老是遇见第一列是地市，第二列是区县。说一堆区县对应一个地市看起来不太好看，要把第一列的地市合并在一起。故写了个小小的Demo，留待以后复用。先看效果图，表一为原数据效果，表二为合并第一列后的数据效果：核心代码为一小段js：
复制链接

扫一扫

专栏目录