jquery 动态合并单元格列
程序员文章站
2022-03-11 16:34:37
...
我的需求是根据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>