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

一、合并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();