利用jquery实现合并多列重复行

来源：互联网发布：创维云电视安装软件编辑：程序博客网时间：2024/06/05 06:03
    <!DOCTYPE html>      <html xmlns="http://www.w3.org/1999/xhtml">      <head>          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />          <title></title>          <script src="Scripts/jquery-1.8.2.min.js"></script>          <script>              $(function () {                  // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件                   // 才保留了jQuery.prototype这个形式                   $.fn.mergeCell = function (options) {                      return this.each(function () {                          var cols = options.cols;                          for (var i = cols.length - 1; cols[i] != undefined; i--) {                              // fixbug console调试                               // console.debug(cols[i]);                               mergeCell($(this), cols[i]);                          }                          dispose($(this));                      });                  };                  // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法                   // 具体可以参考本人前一篇随笔里介绍的那本书                   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();                  }                  $('#process').mergeCell({                      // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始                       // 然后根据指定列来处理(合并)相同内容单元格                       cols: [0, 1, 2, 3]                  });              });              //; (function ($) {                               //})(jQuery);                    function dd() {                  // 这里写成了一个jquery插件的形式                   $('#process').mergeCell({                      // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始                       // 然后根据指定列来处理(合并)相同内容单元格                       cols: [0,1,2,3]                  });              }          </script>      </head>      <body>          <input id="Button1" type="button" value="button" onclick="dd()" />          <table id="process" cellpadding="2" cellspacing="0" border="1">              <thead>                  <tr>                      <td>col0</td>                      <td>col1</td>                      <td>col2</td>                      <td>col3</td>                  </tr>              </thead>              <tbody>                   <tr>                      <td>SuZhou</td>                      <td>11111</td>                      <td>123</td>                      <td>SuZhouCity1</td>                  </tr>                  <tr>                      <td>SuZhou</td>                      <td>11111</td>                      <td>123</td>                      <td>SuZhouCity2</td>                  </tr>                    <tr>                      <td>SuZhou</td>                      <td>11111</td>                      <td>321</td>                      <td>SuZhouCity3</td>                  </tr>                  <tr>                      <td>SuZhou</td>                      <td>11111</td>                      <td>321</td>                      <td>SuZhouCity4</td>                  </tr>                    <tr>                      <td>SuZhou</td>                      <td>222</td>                      <td>112</td>                      <td>SuZhouCity5</td>                  </tr>                  <tr>                      <td>SuZhou</td>                      <td>222</td>                      <td>112</td>                      <td>SuZhouCity6</td>                  </tr>                    <tr>                      <td>SuZhou</td>                      <td>222</td>                      <td>122</td>                      <td>SuZhouCity7</td>                  </tr>                  <tr>                      <td>SuZhou</td>                      <td>222</td>                      <td>122</td>                      <td>SuZhouCity8</td>                  </tr>                    <tr>                      <td>SuZhou</td>                      <td>333</td>                      <td>132</td>                      <td>SuZhouCity9</td>                  </tr>                  <tr>                      <td>SuZhou</td>                      <td>333</td>                      <td>132</td>                      <td>SuZhouCity11</td>                  </tr>                    <tr>                      <td>SuZhou</td>                      <td>333</td>                      <td>142</td>                      <td>SuZhouCity12</td>                  </tr>                  <tr>                      <td>SuZhou</td>                      <td>333</td>                      <td>142</td>                      <td>SuZhouCity13</td>                  </tr>                                                  </tbody>          </table>               </body>      </html>
0 0