jQuery合并单元格以及还原重置

最新推荐文章于 2021-03-16 23:37:51 发布

weixin_30737363

最新推荐文章于 2021-03-16 23:37:51 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xsphehe/p/7102471.html

本文介绍了一种使用jQuery实现表格单元格合并的方法，并提供了合并后还原的解决方案。通过自定义的jQuery函数，可以轻松地对表格中指定列的重复数据进行合并，并能够恢复到原始状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、合并rowspan

jQuery.fn.rowspan = function(colIdx) {
      return this.each(function(){
             var that;
             $('tr', this).each(function(row) {
                  $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
                       if (that!=null && $(this).html() == $(that).html()) {
                            rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined) {
                                $(that).attr("rowSpan",1);
                                rowspan = $(that).attr("rowSpan"); }
                            rowspan = Number(rowspan)+1;
                            $(that).attr("rowSpan",rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    });
             });
       });
  }

使用方法：$("#tableId").rowspan(0); // 第0列上下一样的数据将合并

二、合并后还原

 jQuery.fn.ResetTable=function(){
        $("tr",this).each(function(trindex,tritem){
               $(tritem).find("td").each(function(tdindex,tditem){
                    var Rcount=$(tditem).attr("rowspan");
                    var Ccount=$(tditem).attr("colspan");
                    var newtd="<td class='Ctd'>"+$(tditem).text()+"</td>";
                    if(Rcount>1){
                        var parent=$(tditem).parent("tr")[0];
                        while(Rcount >1){
                            $(parent).next().find("td").eq(tdindex).before(newtd);
                            parent=$(parent).next();
                            Rcount--;
                        }
                        $(tditem).removeAttr("rowspan");
                    }
                    
                    if(Ccount>1){
                        while(Ccount>1){
                            $(tditem).after(newtd);
                            Ccount--;
                        }
                        $(tditem).removeAttr("colspan");
                    }
                    
              });
                
        });
 }
        
        
  使用方法： $("#tableId").ResetTable();