js 根据名称合并单元格

最新推荐文章于 2023-05-15 15:50:32 发布

老何_低调

最新推荐文章于 2023-05-15 15:50:32 发布

阅读量555

点赞数

本文链接：https://blog.csdn.net/heqinghua217/article/details/77410877

版权

js 根据名称合并单元格，要合并的列必须排序在一起，不能随机排序，否则不会合并，如第一列name= 何清华第二列还是何清华，不能是第二列是张三，第三列是何清华，你要和我第一列和第三列合并在一起，那张三怎么办，吧他扔了？切记

<!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>表格相同内容合并</title> 
</head> 
<body> 
合并前： 
<table width="400" border="1" id="tablehqh"> 
<tr> 
<td>a</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td> 
</tr> 
<tr> 
<td>a</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>6</td> 
</tr> 
<tr> 
<td>a</td> 
<td>2</td> 
<td>3</td> 
<td>3</td> 
<td>4</td> 
<td> </td> 
</tr> 
<tr> 
<td>b</td> 
<td>3</td> 
<td>4</td> 
<td>6</td> 
<td>7</td> 
<td> </td> 
</tr> 
<tr> 
<td>b</td> 
<td>3</td> 
<td>5</td> 
<td>6</td> 
<td>7</td> 
<td> </td> 
</tr> 
<tr> 
<td>cc</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td> 
<td> </td> 
</tr> 
<tr> 
<td>cc</td> 
<td>2</td> 
<td>3</td> 
<td>5</td> 
<td>5</td> 
<td> </td> 
</tr> 
<tr> 
<td>d</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td> </td> 
</tr> 
<tr> 
<td>e</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td> </td> 
</tr> 
</table><br /> 
合并后：<br /> 
<table width="400" border="1" id="table1"> 
<tr> 
<td>a</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td> 
</tr> 
<tr> 
<td>a</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>6</td> 
</tr> 
<tr> 
<td>a</td> 
<td>2</td> 
<td>3</td> 
<td>3</td> 
<td>4</td> 
<td> </td> 
</tr> 
<tr> 
<td>b</td> 
<td>3</td> 
<td>4</td> 
<td>6</td> 
<td>7</td> 
<td> </td> 
</tr> 
<tr> 
<td>b</td> 
<td>3</td> 
<td>5</td> 
<td>6</td> 
<td>7</td> 
<td> </td> 
</tr> 
<tr> 
<td>cc</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td> 
<td> </td> 
</tr> 
<tr> 
<td>cc</td> 
<td>2</td> 
<td>3</td> 
<td>5</td> 
<td>5</td> 
<td> </td> 
</tr> 
<tr> 
<td>d</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td> </td> 
</tr> 
<tr> 
<td>e</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td> </td> 
</tr> 
</table> 
</body> 
</html> 

<script type="text/javascript"> 

//参数1： tableid表示要合并的那个table标签的id
//参数2： startRow 从第几行开始
//参数3： endRow 到第几行结束（如果传入0，那么默认会到table的最后一行）
//参数4： col要是你要合并的列索引，索引从0开始，0表示第一列
function mc(tableId, startRow, endRow, col) { 
	var tb = document.getElementById(tableId); 

	//判断下你要合并的那一列是不是大于table的总列数
	if (col >= tb.rows[0].cells.length) { 
		return; 
	} 

	//如果是要合并第0列（下标是0，其实就是第一列）， 那么结束行 =  table的总行数
	if (col == 0) { 
		endRow = tb.rows.length-1; 
	} 

	//从第0行开始，到最后一行结束
	var colName = "";
	var oneTd = null;
	var rowspanLength = 1;

	for (var i = startRow; i < endRow; i++) {

		colName = tb.rows[i].cells[col].innerText;// 得到当前行要合并的列的名
		oneTd =   tb.rows[i].cells[col];//这是要合并列的对象
		rowspanLength = 1;//要合并多少行

		for (var j = i+1; j < endRow; j++ ) {
			//如果上一行的所需合并的列的内容和下一行此列的内容相同，即可合并掉，合并列有一个属性，只要td标签里加入 rowspan=几，就会合并几列了
			if(colName == tb.rows[j].cells[col].innerText) {
				rowspanLength = rowspanLength + 1;//合并列加1
				tb.rows[j].removeChild(tb.rows[j].cells[col]);//把下一行被合并的列删除掉
			} else {
				j = endRow;//退出j循环
			}
		}
		//开始合并单元格
		oneTd.rowSpan = rowspanLength;
		
		//如果已经合并了这几行了，那么这几行就不用再做一样的逻辑判断了，从没有合并的行从新开始
		if(rowspanLength != 1) {
			i = i + rowspanLength - 1;
		} 

	} 
} 

//你就调用此方法，传入对应的参数即可
mc('table1', 0, 0, 0); 
</script>

老何_低调

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 根据名称合并单元格

js 根据名称合并单元格，要合并的列必须排序在一起，不能随机排序，否则不会合并，如第一列name= 何清华第二列还是何清华，不能是第二列是张三，第三列是何清华，你要和我第一列和第三列合并在一起，那张三怎么办，吧他扔了？切记表格相同内容合并合并前： a 1 2 3 4 5 a 1 2 3 4 6 a
复制链接

扫一扫