话不多说,直接上代码
//合并单元格
// 第一个参数为表格DOM
// 第二个参数为数组[{index: 0,rows: 1,}],index一般为0,rows为需要合并的列
// 第三个参数为基准行
function COMSpanArr(DOM,array,standard){
if(DOM.length>0){
for(var i=0;i<DOM.length;i++){
if(i > 0){
for(var j=0;j<array.length;j++){
if(DOM[array[j].index].cells[standard].innerText == DOM[i].cells[standard].innerText && DOM[array[j].index].cells[array[j].rows].innerText == DOM[i].cells[array[j].rows].innerText){
DOM[i].cells[array[j].rows].style.display = "none"
DOM[array[j].index].cells[array[j].rows].rowSpan = (DOM[array[j].index].cells[array[j].rows].rowSpan) + 1
}else{
array[j].index = i
}
}
}
}
}
}
一、关键点:利用td标签的rowspan、colspan属性
二、解析
第一层for循环了表格内每行tr的DOM,判断相邻行之间,指定列的innerText是否相同,如果相同则将当前循环行的指定列隐藏,对比行的指定列rowSpan属性+1。如果不相等则修改对比行的下标。
三、使用方式
直接调用函数COMSpanArr()
<style>
table{
border: 1px solid red;
}
td{
border: 1px solid red;
}
</style>
<table id="table">
<thead>
<tr> <th>序号</th> <th>采购日期</th> <th>订单号</th> <th>商品名称</th> <th>数量</th> </tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>2022-7-12</td>
<td>20220712</td>
<td>电脑</td>
<td>1</td>
</tr>
<tr> <td>002</td> <td>2022-7-12</td> <td>20220712</td> <td>键盘</td> <td>1</td> </tr>
<tr> <td>003</td> <td>2022-7-12</td> <td>20220712</td> <td>鼠标</td> <td>1</td> </tr>
<tr> <td>004</td> <td>2022-7-12</td> <td>20220711</td> <td>鼠标</td> <td>1</td> </tr>
<tr> <td>005</td> <td>2022-7-12</td> <td>20220711</td> <td>鼠标</td> <td>1</td> </tr>
<tr> <td>006</td> <td>2022-7-12</td> <td>20220711</td> <td>机箱</td> <td>1</td> </tr>
</tbody>
</table>
<script src="/js/common.js"></script>
<script>
var DOM = document.getElementById("table").tBodies[0].rows
var spanArr = [{
//合并第二列
index:0,
rows:1, //0为第一列
},{
//合并第三列
index:0,
rows:2, //0为第一列
},{
//合并第四列
index:0,
rows:3, //0为第一列
},]
COMSpanArr(DOM,spanArr,1) //以第二列的采购日期为基准
</script>
四、效果
五、备注
此方法还有不足,如只有一个参数为基准等,后续更新