代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="C:/Users/xqq/Desktop/Study/jquery/jquery.min.js"></script> <script type="text/javascript"> (function($) { $.fn.mergeCell = function(options) { return this.each(function() { var cols = options.cols; for ( var i = cols.length - 1; cols[i] != undefined; i--) { mergeCell($(this), cols[i]); } dispose($(this)); }); }; function mergeCell($table, colIndex) { $table.data('col-content', ''); // 存放單元格內容 $table.data('col-rowspan', 1); // 存放計算的rowspan值 默認為1 $table.data('col-td', $()); // 存放發現的第一個與前一行比較結果不同td(jQuery封裝過的), 默認一個"空"的jquery對象 $table.data('trNum', $('tbody tr', $table).length); // 要處理表格的總行數, 用於最后一行做特殊處理時進行判斷之用 // 我們對每一行數據進行"掃面"處理 關鍵是定位col-td, 和其對應的rowspan $('tbody tr', $table).each(function(index) { // td:eq中的colIndex即列索引 var $td = $('td:eq(' + colIndex + ')', this); // 取出單元格的當前內容 var currentContent = $td.html(); // 第一次時走此分支 if ($table.data('col-content') == '') { $table.data('col-content', currentContent); $table.data('col-td', $td); } else { // 上一行與當前行內容相同 if ($table.data('col-content') == currentContent) { // 上一行與當前行內容相同則col-rowspan累加, 保存新值 var rowspan = $table.data('col-rowspan') + 1; $table.data('col-rowspan', rowspan); // 值得注意的是 如果用了$td.remove()就會對其他列的處理造成影響 $td.hide(); // 最后一行的情況比較特殊一點 // 比如最后2行 td中的內容是一樣的, 那么到最后一行就應該把此時的col-td里保存的td設置rowspan if (++index == $table.data('trNum')) $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } else { // 上一行與當前行內容不同 // col-rowspan默認為1, 如果統計出的col-rowspan沒有變化, 不處理 if ($table.data('col-rowspan') != 1) { $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } // 保存第一次出現不同內容的td, 和其內容, 重置col-rowspan $table.data('col-td', $td); $table.data('col-content', $td.html()); $table.data('col-rowspan', 1); } } }); } // 同樣是個private函數 清理內存之用 function dispose($table) { $table.removeData(); } })(jQuery); $(function() { $('#process').mergeCell({ cols: [0,2] }); }); </script> </head> <body> <table id="process" cellpadding="2" cellspacing="0" border="1"> <thead> <tr> <th>終端名稱</th> <th>業務類型</th> <th>支付方式</th> <th>交易筆數</th> <th>交易金額(元)</th> <th>退款筆數</th> <th>退款金額(元)</th> </tr> </thead> <tbody> <tr> <td>***001</td> <td>掛號</td> <td>銀行卡支付</td> <td>4</td> <td>17.20</td> <td>0</td> <td>0</td> </tr> <tr> <td>***001</td> <td>充值</td> <td>銀行卡支付</td> <td>10</td> <td>3406</td> <td>0</td> <td>0</td> </tr> <tr> <td>***001</td> <td>處方</td> <td>銀行卡支付</td> <td>5</td> <td>813.01</td> <td>0</td> <td>0</td> </tr> <tr> <td>***002</td> <td>掛號</td> <td>銀行卡支付</td> <td>1</td> <td>8.80</td> <td>0</td> <td>0</td> </tr> <tr> <td>***002</td> <td>充值</td> <td>銀行卡支付</td> <td>13</td> <td>3280</td> <td>0</td> <td>0</td> </tr> <tr> <td>***002</td> <td>處方</td> <td>銀行卡支付</td> <td>6</td> <td>3346.56</td> <td>0</td> <td>0</td> </tr> <tr> <td>***003</td> <td>處方</td> <td>銀行卡支付</td> <td>1</td> <td>116</td> <td>0</td> <td>0</td> </tr> <tr> <td>***003</td> <td>掛號</td> <td>銀行卡支付</td> <td>1</td> <td>5.80</td> <td>0</td> <td>0</td> </tr> <tr> <td>***004</td> <td>掛號</td> <td>銀行卡支付</td> <td>3</td> <td>17.40</td> <td>0</td> <td>0</td> </tr> <tr> <td>***004</td> <td>充值</td> <td>銀行卡支付</td> <td>10</td> <td>2397</td> <td>0</td> <td>0</td> </tr> <tr> <td>***004</td> <td>處方</td> <td>銀行卡支付</td> <td>3</td> <td>709.28</td> <td>0</td> <td>0</td> </tr> <tr> <td>***005</td> <td>處方</td> <td>銀行卡支付</td> <td>2</td> <td>437.87</td> <td>0</td> <td>0</td> </tr> <tr> <td>***005</td> <td>充值</td> <td>銀行卡支付</td> <td>4</td> <td>1600</td> <td>0</td> <td>0</td> </tr> <tr> <td>***007</td> <td>充值</td> <td>銀行卡支付</td> <td>8</td> <td>2351</td> <td>0</td> <td>0</td> </tr> <tr> <td>***007</td> <td>掛號</td> <td>銀行卡支付</td> <td>4</td> <td>20.20</td> <td>0</td> <td>0</td> </tr> <tr> <td>***007</td> <td>處方</td> <td>銀行卡支付</td> <td>5</td> <td>549.12</td> <td>0</td> <td>0</td> </tr> <tr> <td>***008</td> <td>充值</td> <td>銀行卡支付</td> <td>5</td> <td>6311</td> <td>0</td> <td>0</td> </tr> <tr> <td>***008</td> <td>處方</td> <td>銀行卡支付</td> <td>9</td> <td>2091.63</td> <td>0</td> <td>0</td> </tr> <tr> <td>***008</td> <td>掛號</td> <td>銀行卡支付</td> <td>1</td> <td>5.80</td> <td>0</td> <td>0</td> </tr> <tr> <td>***009</td> <td>處方</td> <td>銀行卡支付</td> <td>2</td> <td>1142.03</td> <td>0</td> <td>0</td> </tr> <tr> <td>***009</td> <td>充值</td> <td>銀行卡支付</td> <td>1</td> <td>60</td> <td>0</td> <td>0</td> </tr> <tr> <td>***014</td> <td>處方</td> <td>銀行卡支付</td> <td>1</td> <td>422.11</td> <td>0</td> <td>0</td> </tr> <tr> <td>***015</td> <td>處方</td> <td>銀行卡支付</td> <td>1</td> <td>268.70</td> <td>0</td> <td>0</td> </tr> <tr> <td>合計 總機器數:10</td> <td>全部</td> <td></td> <td>100</td> <td>29376.51</td> <td>0</td> <td>0.00</td> </tr> </tbody> </table> </body> </html>