原始表格
合并后的单元格
直接上代码
//合并第一列单元格
//给tbody下的第一行(tr:first-child)第一个单元格(td').eq(0))
//加上rowspan 长度是这个表格tr的长度(attr('rowspan', $("tbody tr").length);)
$('tbody tr:first-child td').eq(0).attr('rowspan', $("tbody tr").length);
var num = $('tbody tr').length;
for (i = 0 ; i<=num; i++){
debugger
//判断tr下面是否有孩子，有则进行(这个判断不太正确 我不是专业的前端,大家有时间可以自行练习一下)
if($('tbody tr').find(':nth-child('/i+2/')')){
//遍历tr 注意这一步比较重要 这是删除td单元格的操作,因为第一列合并的话,
//那么被合并的单元格就会挤到第二列,所以需要拿到第二列所有行(第一行除外)的第一个单元格给删掉，
//删掉的是第一列被合并挤到后面的单元格。
$('tbody tr').filter(function(index) {
// index是当前tr元素的索引（从0开始）
// 检查索引是否大于等于i+2（因为:nth-child是从1开始计数的）
return index >= i + 1; // 注意：这里的比较是index和i+1，因为index是从0开始的
}).find('td').eq(0).remove()
}
}
//该串代码与上面类似，就不再解释了
//合并第二列单元格
$('tbody tr:first-child td').eq(1).attr('rowspan', $("tbody tr").length);
var num = $('tbody tr').length;
for (i = 0 ; i<=num; i++){
debugger
if($('tbody tr').find(':nth-child('/i+2/')')){
$('tbody tr').filter(function(index) {
// index是当前tr元素的索引（从0开始）
// 检查索引是否大于等于i+2（因为:nth-child是从1开始计数的）
return index >= i + 1; // 注意：这里的比较是index和i+1，因为index是从0开始的
}).find('td').eq(1).remove()
}
}
具体为什么这么写，以下代码使用Hbuilder 一步步dubug进行查看,相信大家会发现原因 这个已经写的很清楚！！！
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="GBK"> -->
<meta charset="UTF-8">
<title></title>
<style>
#myTable {
border-collapse: collapse;
width: 100%;
}
#myTable tr, #myTable td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<form>
<table id="myTable">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</table>
</form>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
debugger
var $firstRowCells = $('#myTable tr:first-child td'); // 获取第一行的所有单元格
var $secondRowCells = $('#myTable tr:nth-child(2) td'); // 获取第二行的所有单元格
var $thirdRowCells = $('#myTable tr:nth-child(3) td'); // 获取第二行的所有单元格
//合并第一列
$firstRowCells.eq(0).attr('rowspan', 3);
$secondRowCells.eq(0).remove();
$thirdRowCells.eq(0).remove();
debugger
//合并第二列
$firstRowCells.eq(1).attr('rowspan', 3);
$secondRowCells.eq(1).remove();
$thirdRowCells.eq(1).remove();
});
</script>
到此为止
这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上！!!
