Table 行合并操作

最新推荐文章于 2024-09-12 11:23:34 发布
无心犯错
最新推荐文章于 2024-09-12 11:23:34 发布
阅读量481
点赞数
分类专栏： jQuery 文章标签： jQuery 表格合并
本文链接：https://blog.csdn.net/cymmint/article/details/42298191
版权
jQuery 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table 行合并操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
* { margin:0; padding:0; outline:0; background:transparent;}
table   { border-collapse:collapse; border-spacing:0; line-height:1.5; font-family:"微软雅黑"; font-size:14px; color:#666;}
.dn      { display:none;}

.bg_fec { background:#fec!important;}
.row_comb { cursor:pointer;}
.row_comb:hover { background:#EEF7FF!important;}

.tab_list    { border:1px solid #ccc; line-height:1.8;}
.tab_list th { padding:6px 10px; border:1px solid #ccc; background:#eee; text-align:center;}
.tab_list td { padding:6px 10px; border:1px solid #ccc; background:#f9f9f9; font-size:12px; font-family:"宋体"; text-align:center;}
.tab_list tr:nth-of-type(2n) td { background:#fefefe;}
</style>
</head>

<body style="width:auto; min-width:0;">
<br />

<script>
$(function(){

    $.tableMerger("#tab1");
});

$.tableMerger = function(tab){
    var tab     = $(tab),
        col_sum = getColSum(tab.find("tr").eq(0)); //列总数量

    if(col_sum === -1) {
        console.log("无法获取合并行数");
        return false;
    }

    //Get total columns table
    function getColSum(o){
        var sum = -1,
            tmp;
        if (typeof o == "object" && o.length > 0) {
            o   = o.children();
            sum = 0;
            for(var i=0; i<o.length; i++) {
                var tmp = o.eq(i).attr("colspan");
                if (!isNaN(tmp)) {
                    sum += tmp*1;
                } else {
                    ++sum;
                }
            }
        }
        return sum;
    }

    //Set data-colspan,data-rowspan value
    function childData() {
        var o   = tab.find("tr").children("[rowspan], [colspan]"),
            tmp = -1;

        for(var i=0; i<o.length; i++) {
            tmp = o.eq(i).attr("rowspan");
            if(!isNaN(tmp)) {
                o.eq(i).attr("data-rowspan", tmp);
            }
            tmp = o.eq(i).attr("colspan")
            if(!isNaN(tmp)) {
                o.eq(i).attr("data-colspan", tmp);
            }
        }
    }
    childData();
    
    tab.on("click", ".row_comb", function(){
        var self        = $(this),
            comb_sum    = self.attr("rowspan")*1,
            self_par    = self.parents("tr"),
            self_tr     = self_par.children(),
            tmp;

        //Set rowspan value, child : 表示一个td/th节点
        function setRowspanVal(child, isShow) {
            var rowspan_val = child.attr("rowspan") * 1;
            if (!isNaN(rowspan_val)) {
                if (isShow == 2) { //Parent node show
                    child.attr("rowspan", rowspan_val + comb_sum - 1);
                } else if(isShow == 1) { //Show
                    if (rowspan_val < comb_sum) {
                        child.attr("rowspan", child.attr("data-rowspan"));
                    } else {
                        child.attr("rowspan", rowspan_val + comb_sum - 1);
                    }
                } else if (isShow == 0) { //Hide
                    if (rowspan_val <= comb_sum) {
                        child.attr("rowspan", 1);
                    } else {
                        child.attr("rowspan", rowspan_val - comb_sum + 1);
                    }
                }
            }
        }

        if (comb_sum > 1) { //Hide merge row
            for(var i=self_par.index()+1; i<self_par.index() + self.attr("data-rowspan")*1; i++) { //Hide nodes under row
                tab.find("tr").eq(i).addClass("dn");
            }

            //self.data("child", self_par.children(":gt("+ self.index() +")")); //Save remove the row child
            for(var i=0; i<self_tr.length; i++) { //Set the row rowspan value
                setRowspanVal(self_tr.eq(i), 0);
                /*
                if(i > self.index()) { //Remove the row child
                    self_tr.eq(i).remove()
                }
                */
            }

            //Total replace
            /*
            var tot_tr = tab.find("tr").eq(self_par.index() + self.attr("data-rowspan")*1 - 1).clone().children();
            tot_tr.addClass("tab-mer-off");
            self_par.append(tot_tr);
            */

            if(self_tr.length < col_sum) { //Set parent node rowspan value
                var tr_o  = tab.find("tr"),
                    cur_tr_len;

                for(var n=0; n<col_sum - self_tr.length; n++) {
                    for(var i=self_par.index()-1; i>=0; i--) {
                        cur_tr_len = tr_o.eq(i).children().length;
                        if(cur_tr_len > self_tr.length + n) {
                            setRowspanVal(tr_o.eq(i).children().eq(cur_tr_len - self_tr.length - 1 - n), 0);
                            break;
                        }
                    }
                }
            }

        } else if (comb_sum == 1) { //Show merge row
            if(self.index() != 0 && self_tr.eq(self.index()-1).attr("rowspan") == 1) {
                alert("请先展开父级节点！")
                return false;
            }
        
            comb_sum = self.attr("data-rowspan") * 1; //Get Show row number

            for(var i=self_par.index()+1; i<self_par.index() + comb_sum; i++) { //Show nodes under row
                var cur_tr = tab.find("tr").eq(i).children("[rowspan]");
                tab.find("tr").eq(i).removeClass("dn");
                for(var n=0; n<cur_tr.length; n++) {
                    cur_tr.eq(n).attr("rowspan", cur_tr.eq(n).attr("data-rowspan")); //Reset the next node rowspan value
                }
            }

            for(var i=0; i<self_tr.length; i++) { //Set current row rowspan value
                setRowspanVal(self_tr.eq(i), 1);
            }

            /*
            var tmp_child = self.data("child");
            for(var i=0; i<tmp_child.length; i++) {
                tmp_child.eq(i).attr("rowspan", tmp_child.eq(i).attr("data-rowspan"));
                console.log("\n"+tmp_child.eq(i).attr("rowspan"))
            }
            */

            //Total replace
            /*
            self_par.find(".tab-mer-off").remove();
            self_par.append(tmp_child);
            */

            if(self_tr.length < col_sum) { //Set parent node rowspan value
                var tr_o  = tab.find("tr"),
                    cur_tr_len;

                for(var n=0; n<col_sum - self_tr.length; n++) {
                    for(var i=self_par.index()-1; i>=0; i--) {
                        cur_tr_len = tr_o.eq(i).children().length;
                        if(cur_tr_len > self_tr.length + n) {
                            setRowspanVal(tr_o.eq(i).children().eq(cur_tr_len - self_tr.length -1 - n), 2);
                            break;
                        }
                    }
                }
            }

        }

    });
}
</script>

<table id="tab1" class="tab_list" width="90%" style="margin:0 auto;">
    <tr>
        <td class="row_comb" rowspan="12">一级</td>
        <td class="row_comb" rowspan="6">二级</td>
        <td class="row_comb" rowspan="3">三级</td>
        <td>1</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>2</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>3</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td class="row_comb" rowspan="3">三级</td>
        <td>4</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>5</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>6</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td class="row_comb" rowspan="6">二级</td>
        <td class="row_comb" rowspan="3">三级</td>
        <td>7</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>8</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>9</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td class="row_comb" rowspan="3">三级</td>
        <td>10</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>11</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>12</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>
<br />



</body>
</html>