• 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();
            
  • 相关阅读:
    软件需求模式阅读笔记02
    软件需求模式阅读笔记1
    问题账户需求分析
    浅谈软件架构师的工作过程
    架构之美阅读笔记五
    架构之美阅读笔记四
    架构之美阅读笔记三
    架构之美阅读笔记二
    架构之美阅读笔记一
    软件需求与分析课堂讨论一
  • 原文地址:https://www.cnblogs.com/xsphehe/p/7102471.html
Copyright © 2020-2023  润新知