自动合并表格单元格1、效果 2、html 3、js 4、css1、效果 2、html 3、js 4、css1、效果 2、

1、效果

2、html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="./css/index.css">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
		<script src="./js/index.js"></script>
	</head>
	<body>
		<table id='tbTest'>
			<thead>
				<tr>
					<th>标题</th>
					<th>标题</th>
					<th>标题</th>
					<th>标题</th>
					<th>标题</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>test1</td>
					<td>test1</td>
					<td>test1</td>
					<td>test3</td>
					<td>test3</td>
				</tr>
				<tr>
					<td>test1</td>
					<td>test1</td>
					<td>test1</td>
					<td>test3</td>
					<td>test3</td>
				</tr>
				<tr>
					<td>test4</td>
					<td>test4</td>
					<td>test4</td>
					<td>test3</td>
					<td>test3</td>
				</tr>
				<tr>
					<td>test1</td>
					<td>test1</td>
					<td>test5</td>
					<td>test7</td>
					<td>test2</td>
				</tr>
				<tr>
					<td>test1</td>
					<td>test1</td>
					<td>test6</td>
					<td>test8</td>
					<td>test2</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

3、js

/**
 * 合并单元格
 * table_id：表格id或class
 * length：合并的列数，从左到右
 **/ 
function megeCell([table_id,length=0]) {
	var addAttrData = []
	var removeEleData = []
	var rowLength = length>0 ? length : $(table_id).find('tr').find('th').length
	for(let i=0;i<rowLength;i++){
		var startIndex
		var startValue
		var count = 0
		var arrTds = []
		$(table_id).find('tr').find('td:eq('+i+')').each(function(){
			arrTds.push($(this).text())
		})
		var addAttr = (startIndex) => {
			var obj = {}
			$(table_id).find('tr:eq('+startIndex+')').find('td:eq('+i+')').addClass(i+'addAttr'+startIndex)
			obj.class = '.'+i+'addAttr'+startIndex
			obj.count = count + 1
			addAttrData.push(obj)
		}
		var removeEle = (startIndex) => {
			for(let j=1;j<=count;j++){
				$(table_id).find('tr:eq('+(startIndex+j)+')').find('td:eq('+i+')').addClass(i+'removeEle'+(startIndex+j))
				removeEleData.push('.'+i+'removeEle'+(startIndex+j))
			}
		}
		arrTds.forEach((item,index)=>{
			if(index === 0){
				startValue = item
				return
			}
			if(item === startValue && count === 0){
				startIndex = index
				count++
				addAttr(startIndex)
				removeEle(startIndex)
				return
			}
			if(item === startValue && count > 0){
				count++
				addAttr(startIndex)
				removeEle(startIndex)
				return
			}
			
			startValue = item
			startIndex = index
			count = 0
		})
	}
	addAttrData.forEach((item)=>{
		$(item.class).attr('rowspan',item.count)
	})
	removeEleData.forEach((item)=>{
		$(item).remove()
	})
}


setTimeout(()=>{
	megeCell(['#tbTest',4])
})

4、css

table, th,td{
    border: 1px solid #000000;
    border-collapse: collapse;
	padding:8px 30px;
}
tr{
    height:35px;
}