轉自：https://blog.csdn.net/qq_34129814/java/article/details/80255444
頁面的table表格中又是需要將相同的數據欄合並，今天就學到了一個簡單實用有效的方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="table1"> <tr> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td>111</td> <td>555</td> <td>333</td> </tr> <tr> <td>111</td> <td>888</td> <td>333</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>333</td> </tr> </table> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script> jQuery.fn.rowspan = function(colIdx) { //封裝的一個JQuery小插件 return this.each(function(){ var that; $('tr', this).each(function(row) { $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) { if (that!=null && $(this).html() == $(that).html()) { rowspan = $(that).attr("rowSpan"); if (rowspan == undefined) { $(that).attr("rowSpan",1); rowspan = $(that).attr("rowSpan"); } rowspan = Number(rowspan)+1; $(that).attr("rowSpan",rowspan); $(this).hide(); } else { that = this; } }); }); }); } $(function() { $("#table1").rowspan(0);//傳入的參數是對應的列數從0開始 第一列合並相同 // $("#table1").rowspan(1);//傳入的參數是對應的列數從0開始 第二列合並相同 }); </script> </script> </html>
合並前：（手繪和以上HTML代碼不同）
111 222 333 111 555 333 444 111 333 222 666 888
合並后：（合並第一列中相同的數據）
111 222 333
555 333
444 111 333
222 666 888
其實合並的數據默認居中顯示
該方法較為實用，進行封裝后，其他頁面引用調用較為簡單 且可以根據具體需求去改變
大贊！！！
真滴大贊！