jquery操作table，合并单元格，合并相同的行
转自（http://blog.csdn.net/xiongshengwu/article/details/53696664）
合并的方法
$("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列，例如[0,5],表示第0和第5列 })
操作表格 合并单元格 行 MergeCell.js源码
1 /** 2 * 操作表格 合并单元格 行 3 * 2016年12月13日16:00:41 4 */ 5 (function ($) { 6 // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 7 // 才保留了jQuery.prototype这个形式 8 $.fn.mergeCell = function (options) { 9 return this.each(function () { 10 var cols = options.cols; 11 for (var i = cols.length - 1; cols[i] != undefined; i--) { 12 // fixbug console调试 13 // console.debug(cols[i]); 14 mergeCell($(this), cols[i]); 15 } 16 dispose($(this)); 17 }); 18 }; 19 // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法 20 // 具体可以参考本人前一篇随笔里介绍的那本书 21 function mergeCell($table, colIndex) { 22 23 $table.data('col-content', ''); // 存放单元格内容 24 $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1 25 $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 26 $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 27 28 // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan 29 $('tbody tr', $table).each(function (index) { 30 // td:eq中的colIndex即列索引 31 var $td = $('td:eq(' + colIndex + ')', this); 32 33 // 取出单元格的当前内容 34 var currentContent = $td.html(); 35 36 // 第一次时走此分支 37 if ($table.data('col-content') == '') { 38 39 $table.data('col-content', currentContent); 40 $table.data('col-td', $td); 41 42 } else { 43 // 上一行与当前行内容相同 44 if ($table.data('col-content') == currentContent) { 45 // 上一行与当前行内容相同则col-rowspan累加, 保存新值 46 var rowspan = $table.data('col-rowspan') + 1; 47 $table.data('col-rowspan', rowspan); 48 // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响 49 $td.hide(); 50 51 // 最后一行的情况比较特殊一点 52 // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan 53 if (++index == $table.data('trNum')) 54 $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); 55 56 } else { // 上一行与当前行内容不同 57 // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理 58 if ($table.data('col-rowspan') != 1) { 59 $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); 60 } 61 // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan 62 $table.data('col-td', $td); 63 $table.data('col-content', $td.html()); 64 $table.data('col-rowspan', 1); 65 } 66 } 67 }); 68 } 69 70 // 同样是个private函数 清理内存之用 71 function dispose($table) { 72 $table.removeData(); 73 } 74 })(jQuery);
示例：
1 <html> 2 <head> 3 <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 4 <script type="text/javascript" src="MergeCell.js"></script> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>酒店分房表</title> 7 <style mce_bogus="1" type="text/css"> 8 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, th, s { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; font-style:normal; text-decoration:none;word-wrap: break-word;} 9 10 body {font-family: SimSun; 11 font-style:italic; 12 font-weight:bold; 13 font-size:12px; 14 background:none;margin-left: auto;margin-right: auto;} 15 a { color:#000000; font-size:14px;line-height:26px; font-family:SimSun; text-decoration:none; } 16 a:hover { color:#000000; font-size:14px; line-height:26px; font-family:SimSun; text-decoration:none;} 17 .bt{color: #121212;font-size: 26px; line-height:80px;text-align: center;} 18 .A4 { margin:auto;width: 780px;} 19 .title { 20 color: #0070C0; 21 } 22 </style> 23 </head> 24 <body> 25 26 <div class="A4"> 27 <br/><br/> 28 <div align="center"> 29 <h1><strong style="font-size: 24;">酒店信息和分房表</strong></h1> 30 <br/><br/> 31 </div> 32 <table width="780" border="1" cellspacing="0" cellpadding="20" style="table-layout:fixed; word-break:break-strict;repeat-header:yes;repeat-footer:yes;"> 33 <tr> 34 <td width="140" align="center"><b>居住城市</b></td> 35 <td width="120" align="center"><b>入住日期</b></td> 36 <td width="120" align="center"><b>离店日期</b></td> 37 <td width="200" align="center"><b>酒店名称</b></td> 38 <td width="200" align="center"><b>地址</b></td> 39 </tr> 40 <tbody> 41 <tr> 42 <td align="center"></td> 43 <td align="center">2016-12-11</td> 44 <td align="center"> 2016-12-12</td> 45 <td align="center"> 性格里拉</td> 46 <td align="center"> 上海</td> 47 </tr> 48 </tbody> 49 </table> 50 <br/><br/> 51 <table width="780" border="1" cellspacing="0" cellpadding="20" style="table-layout:fixed; word-break:break-strict;repeat-header:yes;repeat-footer:yes;"> 52 <tr> 53 <td width="140" align="center"><b>房间类型</b></td> 54 <td width="120" align="center"><b>双床房</b></td> 55 </tr> 56 57 <tbody> 58 <tr> 59 <td align="center"><b>数量共计： 5 间</b></td> 60 <td align="center">5</td> 61 </tr> 62 </tbody> 63 </table> 64 <br/><br/> 65 <table id="table_4" width="780" border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed; word-break:break-strict;repeat-header:yes;repeat-footer:yes;"> 66 <tr> 67 <td width="50" align="center"><b>Room</b></td> 68 <td width="50" align="center"><b>Adult</b></td> 69 <td width="120" align="center"><b>中文名</b></td> 70 <td width="200" align="center"><b>Name</b></td> 71 <td width="50" align="center"><b>Sex</b></td> 72 <td width="200" align="center"><b>Room Type</b></td> 73 </tr> 74 <tr> 75 <td align="center">1</td> 76 <td align="center">1</td> 77 <td align="center"> 熊哥1</td> 78 <td align="center"> xsw </td> 79 <td align="center"> 女</td> 80 <td align="center"> 双床房1</td> 81 </tr> 82 <tr> 83 <td align="center">1</td> 84 <td align="center">2</td> 85 <td align="center"> 熊哥2</td> 86 <td align="center"> xsw2222222 </td> 87 <td align="center"> 男</td> 88 <td align="center"> 双床房1</td> 89 </tr> 90 <tr> 91 <td align="center">1</td> 92 <td align="center">3</td> 93 <td align="center"> 杰森.斯坦森</td> 94 <td align="center"> Jason Statham</td> 95 <td align="center"> 男</td> 96 <td align="center"> 双床房1</td> 97 </tr> 98 <tr> 99 <td align="center">2</td> 100 <td align="center">4</td> 101 <td align="center"> 李锡龄</td> 102 <td align="center"> Jason Statham</td> 103 <td align="center"> 男</td> 104 <td align="center"> 双床房2</td> 105 </tr> 106 <tr> 107 <td align="center">2</td> 108 <td align="center">5</td> 109 <td align="center"> 李孝利</td> 110 <td align="center"> Jason Statham</td> 111 <td align="center"> 男</td> 112 <td align="center"> 双床房2</td> 113 </tr> 114 <tr> 115 <td align="center">2</td> 116 <td align="center">6</td> 117 <td align="center"> 刘德国</td> 118 <td align="center"> Jason Statham</td> 119 <td align="center"> 男</td> 120 <td align="center"> 双床房2</td> 121 </tr> 122 <tr> 123 <td align="center">3</td> 124 <td align="center">7</td> 125 <td align="center"> 杰森.四米</td> 126 <td align="center"> Jason Statham</td> 127 <td align="center"> 男</td> 128 <td align="center"> 双床房3</td> 129 </tr> 130 <tr> 131 <td align="center">3</td> 132 <td align="center">8</td> 133 <td align="center"> 凯威.斯坦森</td> 134 <td align="center"> Jason Statham</td> 135 <td align="center"> 男</td> 136 <td align="center"> 双床房3</td> 137 </tr> 138 <tr> 139 <td align="center">3</td> 140 <td align="center">9</td> 141 <td align="center"> 杰森史蒂文</td> 142 <td align="center"> Jason Statham</td> 143 <td align="center"> 男</td> 144 <td align="center"> 双床房3</td> 145 </tr> 146 <tr> 147 <td align="center">4</td> 148 <td align="center">10</td> 149 <td align="center"> 5</td> 150 <td align="center"> Jason Statham</td> 151 <td align="center"> 男</td> 152 <td align="center"> 双床房4</td> 153 </tr> 154 <tr> 155 <td align="center">4</td> 156 <td align="center">11</td> 157 <td align="center"> 3</td> 158 <td align="center"> Jason Statham</td> 159 <td align="center"> 男</td> 160 <td align="center"> 双床房4</td> 161 </tr> 162 <tr> 163 <td align="center">4</td> 164 <td align="center">12</td> 165 <td align="center"> 1</td> 166 <td align="center"> Jason Statham</td> 167 <td align="center"> 男</td> 168 <td align="center"> 双床房4</td> 169 </tr> 170 <tr> 171 <td align="center">4</td> 172 <td align="center">13</td> 173 <td align="center"> 杰森.托马鞍山</td> 174 <td align="center"> Jason Statham</td> 175 <td align="center"> 男</td> 176 <td align="center"> 双床房4</td> 177 </tr> 178 <tr> 179 <td align="center">5</td> 180 <td align="center">14</td> 181 <td align="center"> 孙露</td> 182 <td align="center"> Jason Statham</td> 183 <td align="center"> 男</td> 184 <td align="center"> 双床房5</td> 185 </tr> 186 <tr> 187 <td align="center">5</td> 188 <td align="center">15</td> 189 <td align="center"> 李红梅</td> 190 <td align="center"> Jason Statham</td> 191 <td align="center"> 男</td> 192 <td align="center"> 双床房5</td> 193 </tr> 194 <tr> 195 <td align="center">5</td> 196 <td align="center">16</td> 197 <td align="center"> 卓越杀</td> 198 <td align="center"> Jason Statham</td> 199 <td align="center"> 男</td> 200 <td align="center"> 双床房5</td> 201 </tr> 202 <tr> 203 <td align="center">5</td> 204 <td align="center">17</td> 205 <td align="center"> 4</td> 206 <td align="center"> Jason Statham</td> 207 <td align="center"> 男</td> 208 <td align="center"> 双床房5</td> 209 </tr> 210 <tr> 211 <td align="center">5</td> 212 <td align="center">18</td> 213 <td align="center"> 12</td> 214 <td align="center"> Jason Statham</td> 215 <td align="center"> 男</td> 216 <td align="center"> 双床房5</td> 217 </tr> 218 <tr> 219 <td align="center">5</td> 220 <td align="center">19</td> 221 <td align="center"> 16</td> 222 <td align="center"> Jason Statham</td> 223 <td align="center"> 男</td> 224 <td align="center"> 双床房5</td> 225 </tr> 226 </table> 227 <br/><br/> 228 </div> 229 230 <script type="text/javascript"> 231 /** 232 * 操作表格 合并单元格 行 233 * 2016年12月13日16:00:41 234 */ 235 (function($) { 236 // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 237 // 才保留了jQuery.prototype这个形式 238 $('#table_4').mergeCell({ 239 cols:[0,5] //第0和第5列合并 240 }); 241 </script> 242 </body> 243 </html>
效果图：
