原始表格
合并后的单元格
直接上代码
//合并第一列单元格 //给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>
到此为止
这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上！!!
