转自：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
其实合并的数据默认居中显示
该方法较为实用，进行封装后，其他页面引用调用较为简单 且可以根据具体需求去改变
大赞！！！
真滴大赞！