1、效果
如果第一列合并，那么根据输入参数 length，对后面的列进行自动合并。适用于第一列判断合并时，后面几列和第一列一样，也需要合并的场景。
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/index3.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>test2</td>
<td>test1</td>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</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>test5</td>
<td>test7</td>
<td>test2</td>
</tr>
</tbody>
</table>
</body>
</html>
2、css
table, th,td{
border: 1px solid #000000;
border-collapse: collapse;
padding:8px 30px;
}
tr{
height:35px;
}
3、js
/**
* 合并单元格
* table_id：表格id或class
* length：合并的列数，从左到右
**/
function megeCell([table_id,length=1]) {
var startIndex
var startValue
var count = 0
var arrTds = []
var addAttrData = []
$(table_id).find('tr').find('td:eq('+0+')').each(function(){
arrTds.push($(this).text())
})
var addClass = (index,className) => {
for(let i=0;i<length;i++){
$(table_id).find('tr:eq('+index+')').find('td:eq('+i+')').addClass(className)
}
}
var addAttr = (startIndex) => {
addClass(startIndex,'addAttr'+startIndex)
var obj = {class:'.addAttr'+startIndex, count:count + 1}
addAttrData.push(obj)
}
var removeEle = (startIndex) => {
for(let j=1;j<=count;j++){
addClass(startIndex+j,'removeEle')
}
}
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)
})
$('.removeEle').remove()
}
setTimeout(()=>{
megeCell(['#tbTest',4])
})
