JQuery合并表格单元格

时间:2022-11-20 11:18:50

一、需求

如果存在一个表格,想把其中某一列内容相同的部分合并单元格,用JQ动态如何操作,原始表格如下:

JQuery合并表格单元格

 

合并单元格之后的表格如下:

JQuery合并表格单元格

JQuery代码如下:

 1 <script type="text/javascript">
 2         jQuery.fn.rowspan = function (colIdx) { 
 3             return this.each(function () {
 4                 var that;
 5                 $('tr', this).each(function (row) {
 6                     $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
 7                         if (that != null && $(this).html() == $(that).html()) {
 8                             rowspan = $(that).attr("rowSpan");
 9                             if (rowspan == undefined) {
10                                 $(that).attr("rowSpan", 1);
11                                 rowspan = $(that).attr("rowSpan");
12                             }
13                             rowspan = Number(rowspan) + 1;
14                             $(that).attr("rowSpan", rowspan);
15                             $(this).hide();
16                         } else {
17                             that = this;
18                         }
19                     });
20                 });
21             });
22         }
23         $(document).ready(function () {
24             $("#table1").rowspan(0);
25             $("#table1").rowspan(2);
26         });
27     </script>

注:合并的是第一列和第三列,这个需求比较简单,不许多大的阐述^_^结束!