jQuery实现合并表格单元格中相同行操作示例

本文实例讲述了jQuery实现合并表格单元格中相同行操作。分享给大家供大家参考，具体如下：

合并的方法

$("#tableid").mergeCell({
　　cols:[X,X] ///参数为要合并的列
})

/**
* 操作表格 合并单元格 行
* 2016年12月13日16:00:41
*/
(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();
  }
})(jQuery);

示例html代码

 



 

   


   

     
酒店信息和分房表
     


   
   

     

      
居住城市
      
入住日期
      
离店日期
      
酒店名称
      
地址
     
        

      

        

        
2016-12-11
        
 2016-12-12
        
 性格里拉
        
 上海
      
     
   
   


    

     

      
房间类型
      
双床房
     
     

      

        
数量共计： 5 间
        
5
      
     
   
   


   

     

      
Room
      
Adult
      
中文名
      
Name
      
Sex
      
Room Type
     
      

        
1
        
1
        
 熊哥1
        
 xsw 
        
 女
        
 双床房1
      
      

        
1
        
2
        
 熊哥2
        
 xsw2222222 
        
 男
        
 双床房1
      
      

        
1
        
3
        
 杰森.斯坦森
        
 Jason Statham
        
 男
        
 双床房1
      
      

        
2
        
4
        
 李锡龄
        
 Jason Statham
        
 男
        
 双床房2
      
      

        
2
        
5
        
 李孝利
        
 Jason Statham
        
 男
        
 双床房2
      
      

        
2
        
6
        
 刘德国
        
 Jason Statham
        
 男
        
 双床房2
      
      

        
3
        
7
        
 杰森.四米
        
 Jason Statham
        
 男
        
 双床房3
      
      

        
3
        
8
        
 凯威.斯坦森
        
 Jason Statham
        
 男
        
 双床房3
      
      

        
3
        
9
        
 杰森史蒂文
        
 Jason Statham
        
 男
        
 双床房3
      
      

        
4
        
10
        
 5
        
 Jason Statham
        
 男
        
 双床房4
      
      

        
4
        
11
        
 3
        
 Jason Statham
        
 男
        
 双床房4
      
      

        
4
        
12
        
 1
        
 Jason Statham
        
 男
        
 双床房4
      
      

        
4
        
13
        
 杰森.托马鞍山
        
 Jason Statham
        
 男
        
 双床房4
      
      

        
5
        
14
        
 孙露
        
 Jason Statham
        
 男
        
 双床房5
      
      

        
5
        
15
        
 李红梅
        
 Jason Statham
        
 男
        
 双床房5
      
      

        
5
        
16
        
 卓越杀
        
 Jason Statham
        
 男
        
 双床房5
      
      

        
5
        
17
        
 4
        
 Jason Statham
        
 男
        
 双床房5
      
      

        
5
        
18
        
 12
        
 Jason Statham
        
 男
        
 双床房5
      
      

        
5
        
19
        
 16
        
 Jason Statham
        
 男
        
 双床房5
      
   
   


 
 
 

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。