zoukankan      html  css  js  c++  java
  • 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();
            
  • 相关阅读:
    插入排序(JS代码)
    选择排序(JS代码)
    快速排序(JS代码)
    冒泡排序(js代码)
    《CSS揭秘》--推荐指数⭐⭐⭐⭐⭐
    CSS中position的定位
    逆转录转座子初窥
    django开发傻瓜教程-1-安装和HelloWorld
    爬虫教程-1
    算法_NP_证明
  • 原文地址:https://www.cnblogs.com/xsphehe/p/7102471.html
Copyright © 2011-2022 走看看