这次给大家带来JS实现表格中相同单元格合并，JS实现表格中相同单元格合并的注意事项有哪些，下面就是实战案例，一起来看一下。
一定要注意如果从list的开始元素循环下去，remove掉一个元素后，有些元素就找不到了或者说不是要找的那个元素，感兴趣的各位可以研究下哈
merge.html function merge1(){ //可实现单元格，通过给 开始cell的比较 var totalRow = $("#tbl").find("tr").length; var totalCol = $("#tbl").find("tr").eq(0).find("td").length; for(var col=totalCol-1;col>=1;col--){ spanNum =1; startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col); for(var row = totalRow-1;row>=1;row--){ targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col); if(startCell.text() == targetCell.text() && startCell.text()!=""){ spanNum++; targetCell.attr("rowSpan",spanNum); startCell.remove(); }else{ spanNum =1; } startCell = targetCell; } } } function merge2() { //可实现合并单元格,上下行来比较 var totalCols = $("#tbl").find("tr:eq(0)").find("td").length; var totalRows = $("#tbl").find("tr").length; for ( var i = totalCols-1; i >= 1; i--) { for ( var j = totalRows-1; j >= 1; j--) { startCell = $("#tbl").find("tr").eq(j).find("td").eq(i); targetCell = $("#tbl").find("tr").eq(j - 1).find("td").eq(i); if (startCell.text() == targetCell.text() && targetCell.text() != "") { targetCell.attr("rowSpan", (startCell.attr("rowSpan")==undefined)?2:(eval(startCell.attr("rowSpan"))+1)); startCell.remove(); } } } } /*先合并，使用style 的display:none将相同元素隐藏，然后再remove */ function merge3(){ var totalCols = $("#tbl").find("tr:eq(0)").find("td").length; var totalRows = $("#tbl").find("tr").length; for(var col=totalCols-1;col>=1;col--){ spanNum =1; startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col); for(var row = totalRows-1;row>=1;row--){ targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col); if(startCell.text() == targetCell.text() && startCell.text()!=""){ spanNum++; targetCell.attr("rowSpan",spanNum); startCell.attr("style","visibility:hidden"); // startCell.attr("style","display:none"); }else{ spanNum =1; } startCell = targetCell; } } for(var j=totalCols-1;j>=1;j--){ for(var i=totalRows-1;i>=1;i--){ cell = $("#tbl").find("tr").eq(i).find("td").eq(j); if(cell.attr("style")!=undefined){ if(cell.attr("style")=="visibility:hidden"){ cell.remove(); } } } } } function merge4(){ //与merge3方法类似，目的是看一下 display:none与visibility:hidden的效果区别 var totalCols = $("#tbl").find("tr:eq(0)").find("td").length; var totalRows = $("#tbl").find("tr").length; for(var col=totalCols-1;col>=1;col--){ spanNum =1; startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col); for(var row = totalRows-1;row>=1;row--){ targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col); if(startCell.text() == targetCell.text() && startCell.text()!=""){ spanNum++; targetCell.attr("rowSpan",spanNum); startCell.attr("style","display:none"); // startCell.attr("style","display:none"); }else{ spanNum =1; } startCell = targetCell; } } for(var j=totalCols-1;j>=1;j--){ for(var i=totalRows-1;i>=1;i--){ cell = $("#tbl").find("tr").eq(i).find("td").eq(j); if(cell.attr("style")!=undefined){ if(cell.attr("style")=="display:none"){ cell.remove(); } } } } }
| 销售时间 | 裙子 | 裤子 | 风衣 | 鞋子 |
| 8:00-9:00 | 3 | 4 | ||
| 9:00-10:00 | 3 | 2 | 5 | 3 |
| 10:00-11:00 | 3 | 2 | 1 | |
| 11:00-12:00 | 1 |
登录后复制
总结：在使用remove的时候，一定要注意如果 从list的开始元素循环下去，remove掉一个元素后，有些元素就找不到了或者说不是要找的那个元素；最好是从后面开始循环。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
HTML+CSS+jQuery实现轮播广告图
C3+jQuery做出动画效果及回调函数
以上就是JS实现表格中相同单元格合并的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2782538.html
