table表格合并列中相同的内容

方法一：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 
 9     <table id="table1">
10         <tr>
11             <td>111</td>
12             <td>222</td>
13             <td>333</td>
14         </tr>
15         <tr>
16             <td>111</td>
17             <td>555</td>
18             <td>333</td>
19         </tr>
20         <tr>
21             <td>111</td>
22             <td>888</td>
23             <td>333</td>
24         </tr>
25         <tr>
26             <td>aaa</td>
27             <td>bbb</td>
28             <td>333</td>
29         </tr>
30     </table>
31 
32     <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
33     <script>
34 
35     jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
36           return this.each(function(){
37              var that;
38              $('tr', this).each(function(row) {
39                 $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
40                    if (that!=null && $(this).html() == $(that).html()) {
41                       rowspan = $(that).attr("rowSpan");
42                       if (rowspan == undefined) {
43                          $(that).attr("rowSpan",1);
44                          rowspan = $(that).attr("rowSpan"); }
45                       rowspan = Number(rowspan)+1;
46                       $(that).attr("rowSpan",rowspan);
47                       $(this).hide();
48                    } else {
49                       that = this;
50                    }
51                 });
52              });
53           });
54        }
55        $(function() {
56           $("#table1").rowspan(0);//传入的参数是对应的列数从0开始  第一列合并相同
57           // $("#table1").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同
58        });
59     </script>
60 
61 </script>
62 </html>

合并前：

这里写图片描述

合并后：（根据实际项目需求，只合并第一列）

这里写图片描述

方法二：

 1     function hb() {
 2         var tab = document.getElementById("subtable");
 3         var maxCol = 3, val, count, start;
 4         var ys = "";
 5         for (var col = maxCol - 1; col >= 0 ; col--) {
 6             count = 1;
 7             val = "";
 8             for (var i = 0; i < tab.rows.length; i++) {
 9                 if (val == tab.rows[i].cells[col].innerHTML) {
10                     count++;
11                 } else {
12                     if (count > 1) {
13                         //合并 
14                         start = i - count;
15                         if (ys == "#00FFFF") {
16                             ys = "#EEEE00";
17                         } else {
18                             ys = "#00FFFF";
19                         }
20                         tab.rows[start].cells[col].rowSpan = count;
21                         tab.rows[start].cells[1].style.backgroundColor = ys;//改变颜色 
22                         // ys="#EEEE00"; 
23                         // tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色 
24                         for (var j = start + 1; j < i; j++) { // 
25                             tab.rows[j].cells[col].style.display = "none";
26                             tab.rows[j].removeChild(tab.rows[j].cells[col]);
27                         }
28                         count = 1;
29                     }
30                     val = tab.rows[i].cells[col].innerHTML;
31                 }
32             }
33 
34             if (count > 1) { //合并，最后几行相同的情况下 
35                 start = i - count;
36                 tab.rows[start].cells[col].rowSpan = count;
37                 for (var j = start + 1; j < i; j++) {
38                     tab.rows[j].removeChild(tab.rows[j].cells[col]);
39                 }
40             }
41         }
42     }

第一种方法，仅用20行代码就可实现该功能，而且封装在jq库里面，其他页面可以直接调用。

第二种方法比较复杂，而且会把tabel里面所有相同列都合并，不实用。但是思路可以学习一下。