jquery 合并单元格

taiguolaotu

已于 2024-03-19 18:16:54 修改

阅读量569

点赞数 7

分类专栏：浅谈前端文章标签： jquery 前端 javascript

于 2024-03-17 17:53:20 首次发布

本文链接：https://blog.csdn.net/taiguolaotu/article/details/136786116

版权

浅谈前端专栏收录该内容

51 篇文章 1 订阅

订阅专栏

原始表格
在这里插入图片描述
合并后的单元格

直接上代码

  //合并第一列单元格
  //给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>

到此为止

这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上！!!