zoukankan      html  css  js  c++  java
  • 封装Jquery 合并table中任何同列数据

    封装代码:

    jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件
            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;
                        }
                    });
                });
            });
        }
    

      调用方式:

    $("#ceshi").rowspan(0); //.rowspan(0)从0即第一列开始
    

      2纯js写法:

    function hb(){ 
    var tab = document.getElementById("subtable"); 
    var maxCol = 3, val, count, start; 
    var ys=""; 
    for(var col = maxCol-1; col >= 0 ; col--) { 
    count = 1; 
    val = ""; 
    for(var i=0; i<tab.rows.length; i++){ 
    if(val == tab.rows[i].cells[col].innerHTML){ 
    count++; 
    }else{ 
    if(count > 1){ 
    //合并 
    start = i - count; 
    if(ys=="#00FFFF"){ 
    ys="#EEEE00"; 
    }else{ 
    ys="#00FFFF"; 
    } 
    tab.rows[start].cells[col].rowSpan = count; 
    tab.rows[start].cells[1].style.backgroundColor=ys;//改变颜色 
    // ys="#EEEE00"; 
    // tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色 
    for(var j=start+1; j<i; j++){ // 
    tab.rows[j].cells[col].style.display = "none"; 
    tab.rows[j].removeChild(tab.rows[j].cells[col]); 
    } 
    count = 1; 
    } 
    val = tab.rows[i].cells[col].innerHTML; 
    } 
    } 
    
    if(count > 1 ){ //合并,最后几行相同的情况下 
    start = i - count; 
    tab.rows[start].cells[col].rowSpan = count; 
    for(var j=start+1; j<i; j++) { 
    tab.rows[j].removeChild(tab.rows[j].cells[col]); 
    } 
    } 
    } 
    } 

    第一种方法,仅用20行代码就可实现该功能,而且封装在jq库里面,其他页面可以直接调用。也就是说,其他页面只需一行代码就可实现该功能。即$("#ceshi").rowspan(0); 
    比起第一种,第二种方法比较复杂,而且会把tabel里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。

  • 相关阅读:
    阅读大道至简的读后感
    暑期第四周学习总结
    暑假学期第三周总结
    暑期学习第二周总结
    kuangbin专题 小希的迷宫
    Exam 5095 Hopscotch
    Exam 5431 //Barareh on Fire
    4.19 手写简单循环队列与栈
    web安全:xss && csrf
    web安全:HTTPS
  • 原文地址:https://www.cnblogs.com/Godlovezk/p/8033791.html
Copyright © 2011-2022 走看看