一定要注意如果从list的开始元素循环下去，remove掉一个元素后，有些元素就找不到了或者说不是要找的那个元素，感兴趣的各位可以研究下哈
<!doctype html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/jquery-ui.css" /> <script src="js/jquery.js"></script> <script src="js/jquery-ui.js"></script> <script type="text/javascript"> 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(); } } } } } </script> </head> <body> <table id="tbl" cellpadding="3" border=1> <thead> <tr> <td>销售时间</td> <td>裙子</td> <td>裤子</td> <td>风衣</td> <td>鞋子</td> </tr> </thead> <tbody> <tr> <td>8:00-9:00</td> <td>3</td> <td></td> <td>4</td> <td></td> </tr> <tr> <td>9:00-10:00</td> <td>3</td> <td>2</td> <td>5</td> <td>3</td> </tr> <tr> <td>10:00-11:00</td> <td>3</td> <td>2</td> <td></td> <td>1</td> </tr> <tr> <td>11:00-12:00</td> <td></td> <td></td> <td></td> <td>1</td> </tr> </tbody> </table> <input type="button" value="合并" id="merge" onclick="merge2();"> </body> </html>
总结：在使用remove的时候，一定要注意如果 从list的开始元素循环下去，remove掉一个元素后，有些元素就找不到了或者说不是要找的那个元素；最好是从后面开始循环。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
html+css+jquery实现轮播广告图
c3+jquery做出动画效果及回调函数
以上就是js实现表格中相同单元格合并的详细内容。