jquery 动态合并单元格列

最新推荐文章于 2023-08-13 16:42:36 发布

zhaoxiangchao

最新推荐文章于 2023-08-13 16:42:36 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013350170/article/details/82702245

jquery 同时被 2 个专栏收录

1 篇文章

订阅专栏

jquery 动态合并单元格列

1 篇文章

订阅专栏

本文介绍了一种使用jQuery实现表格列合并的方法，通过比较相邻行的首列值来决定是否进行合并，适用于需要根据首列内容对后续列进行合并显示的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的需求是根据table的第一列做列合并，也就是说第二列，第三列。。。的合并都在第一列合并单元格数量之内做操作，网上找了好多没有特别符合的，所以用jquery写了下，可能方法比较笨但是比较灵活，可以根据自己的需求做修改。

以下代码放到html中可以访问，点击按钮可以看到合并单元格效果

<html>
<head>
<title>jquery合并单元格</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

 function ss (id) {
 	
		var tr = $("#"+id+" tr").length;// 获取当前表格中tr的个数
		var mark = 0; //要合并的单元格数
		var mark1 = 0; //要合并的单元格数
    var index = 0; //起始行数
    var index1 = 0; //起始行数
 	
		if(tr >= 2){
	    for(var i=0;i < tr ;i++){
	          var ford = $("#tab1 tr:gt(0):eq("+i+") td:eq(0)").text();  
	          var ford1 = $("#tab1 tr:gt(0):eq("+i+") td:eq(4)").text(); 
	          var behind = $("#tab1 tr:gt(0):eq("+(parseInt(i)+1)+") td:eq(0)").text();
	          var behind1 = $("#tab1 tr:gt(0):eq("+(parseInt(i)+1)+") td:eq(4)").text(); 
	          //根据下标获取单元格的值
	          // tr:gt(0)  从下标0 开始获取
	          // tr:gt(0):eq( i ) :i 标识 当前行的下标 ，0 开始
	          // td:eq(0) 当前行的第一个单元格，下标从0开始
	          //alert(ford1);
	          //alert(behind);
	          if(ford == behind){
	              $("#"+id+" tr:gt(0):eq("+(parseInt(i)+1)+") td:eq(0)").hide();
	              $("#"+id+" tr:gt(0):eq("+(parseInt(i)+1)+") td:eq(1)").hide();
	              $("#"+id+" tr:gt(0):eq("+(parseInt(i)+1)+") td:eq(2)").hide();
	              $("#"+id+" tr:gt(0):eq("+(parseInt(i)+1)+") td:eq(3)").hide();
	              mark = mark +1;
	              if(ford1 == behind1){
	              	$("#"+id+" tr:gt(0):eq("+(parseInt(i)+1)+") td:eq(4)").hide();
	              	mark1 = mark1 +1;
	              }else{
	              	index1 = i-mark1;
	              	$("#"+id+" tr:gt(0):eq("+index1+") td:eq(4)").attr("rowspan",mark1+1);//+1 操作标识，将当前的行加入到隐藏
	              	
	              	if(mark1==0){
                      $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(4)").show();
           
                  }else{
                      $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(4)").hide();

                  }
	              	mark1 = 0;
	              	
	              }	
	          }else if(ford != behind){
	              //如果值不匹配则遍历到不同种的分类,将旧分类隐藏
	              index = i-mark;
	              $("#"+id+" tr:gt(0):eq("+index+") td:eq(0)").attr("rowspan",mark+1);//+1 操作标识，将当前的行加入到隐藏
	              $("#"+id+" tr:gt(0):eq("+index+") td:eq(1)").attr("rowspan",mark+1);//+1 操作标识，将当前的行加入到隐藏
	              $("#"+id+" tr:gt(0):eq("+index+") td:eq(2)").attr("rowspan",mark+1);//+1 操作标识，将当前的行加入到隐藏
	              $("#"+id+" tr:gt(0):eq("+index+") td:eq(3)").attr("rowspan",mark+1);//+1 操作标识，将当前的行加入到隐藏

				        //rowspan 列上横跨， colspan 行上横跨
				        //后面的参数，表示横跨的单元格个数，
				        //合并单元格就是将其他的单元格隐藏（hide）,或删除（remove）。
				        //将一个单元格的rowspan 或colsspan 加大
				         if(mark==0){
                    $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(0)").show();
                    $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(1)").show();
                    $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(2)").show();
                    $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(3)").show();
                 }else{
                    $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(0)").hide();
                    $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(1)").hide();
                    $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(2)").hide();
                    $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(3)").hide();
                }
	              mark = 0;
	              index1 = i-mark1;
	              $("#"+id+" tr:gt(0):eq("+index1+") td:eq(4)").attr("rowspan",mark1+1);//+1 操作标识，将当前的行加入到隐藏
	               if(mark1==0){
                        $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(4)").show();
                 }else{
                       $("#"+id+" tr:gt(0):eq("+(parseInt(i))+") td:eq(4)").hide();
                 }
	              mark1 = 0;
	              
	          }
	      }
	    }
    }
    

</script>
</head>
<body>
  <input id="Button1" onclick="ss('tab1')" type="button" value="点我合并单元格
  " />
  <table id="tab1" border="1" style="width:100%;">
    <tr>
      <td>Id</td>
      <td>Name</td>
      <td>Address</td>
      <td>curr</td>
      <td>rmb</td>
      <td>ss</td>
    </tr>

    <tr>
       <td>11</td>
      <td>flower</td>
      <td>gz</td>
      <td>11</td>
      <td>人民币</td>
       <td>ss</td>
    </tr>
    <tr>
       <td>11</td>
      <td>flower</td>
      <td>gz</td>
      <td>11</td>
      <td>人民币</td>
      <td>ss</td>
    </tr>
    <tr>
       <td>11</td>
      <td>flower</td>
      <td>gz</td>
      <td>11</td>
      <td>美元</td>
      <td>ss</td>
    </tr>
    <tr>
       <td>11</td>
      <td>flower</td>
      <td>gz</td>
      <td>11</td>
      <td>美元</td>
      <td>ss</td>
    </tr>
    
    
    <tr>
      <td>22</td>
      <td>flower</td>
      <td>gz</td>
      <td>11</td>
      <td>人民币</td>
      <td>ss</td>
    </tr>
    <tr>
      <td>22</td>
      <td>flower</td>
      <td>gz</td>
      <td>11</td>
      <td>人民币</td>
      <td>ss</td>
    </tr>
    <tr>
      <td>22</td>
      <td>flower</td>
      <td>gz</td>
      <td>11</td>
      <td>美元</td>
      <td>ss</td>
    </tr>
    <tr>
      <td>22</td>
      <td>flower</td>
      <td>gz</td>
      <td>11</td>
      <td>美元</td>
      <td>ss</td>
    </tr>
  </table>
</body>
</html>