jquery控制表格跨列单元格显示隐藏

  jquery控制表格跨列单元格显示隐藏。表格列很多时,存在跨列跨行合并,如何点击表头实现跨列单元格隐藏,只显示当前第一列的值,从而缩小表格宽度。效果如下

jquery控制表格跨列单元格显示隐藏
未隐藏原始效果
jquery控制表格跨列单元格显示隐藏
隐藏其他列,只显示第一列效果

  jquery控制表格跨列单元格显示隐藏源代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery控制表格跨列单元格显示隐藏</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".searchChange").click(function () {
                var t = this.innerHTML;
                var collapse = '-' == t, plus = '+' == t;
                this.innerHTML = collapse ? '+' : '-';
                if (collapse || plus) {
                    var td = this.parentNode, colspan = Math.max(parseInt(td.getAttribute('colspan') || 1), parseInt(td.getAttribute('ocol') || 1));
                    if (colspan == 1 ) return;
                    var cellIndex = td.cellIndex, endIndex = cellIndex + colspan, tds;
                  
                    if (collapse) {
                        if (!td.getAttribute('ocol')) td.setAttribute('ocol', td.getAttribute('colspan') || 1);
                        $(td).removeAttr('colspan');
                    }
                    else $(td).attr({ colspan: colspan });
                    rows.each(function () {
                        tds = $('td,th', this);
                        for (var i = cellIndex ; i < endIndex; i++) {
                            if (i != cellIndex) tds.eq(i)[collapse ? 'addClass' : 'removeClass']('hidden');
                            colspan = tds.eq(i).attr('ocol');
                            if (collapse) {
                                if (!tds.eq(i).attr('ocol')) tds.eq(i).attr('ocol', tds.eq(i).attr('colspan') || 1);
                                tds.eq(i).removeAttr('colspan');
                            }
                            else tds.eq(i).attr({ colspan: colspan });
                        }
                    });
                }
            });
            function getTds(v) { var s = ''; for (var i = 0; i < v; i++) s += '<td class="inserted"></td>'; return s; }
            var rows = $('#tb').find('tr');
            //补全跨行跨列的td,方便计算位置
            $('#tb ').find('th[rowspan],th[colspan],td[rowspan],td[colspan]').each(function () {//补全当前td,th的colspan-1个数的td
                var col = parseInt(this.getAttribute('colspan') || 1);
                if (col > 1) $(this).after(getTds(col - 1));
            }).each(function () {//跨行补全
                var row = parseInt(this.getAttribute('rowspan') || 1), col = parseInt(this.getAttribute('colspan') || 1);
                if (row < 2) return true;
                var rowIndex = this.parentNode.rowIndex, cellIndex = this.cellIndex, s = getTds(col),td;
                for (var i = rowIndex + 1, j = rowIndex + row; i < j; i++) {
                    td = rows.eq(i).find('td,th').eq(cellIndex)
                    if (td.length) rows.eq(i).find('td,th').eq(cellIndex).before(s)
                    else rows.eq(i).append(s)
                }
            });
            rows = rows.filter(':gt(0)');
        })
    </script>
    <style>td.inserted,td.hidden{display:none}</style>
</head>
<body>
    <div class="row clearfix" style="margin:0">
        <table id="tb" width="30%" class="table table-striped table-bordered table-hover" style="width:500px">
            <thead>
                <!-- 一级标题 -->
                <tr id="level1">
                    <th colspan="5" rowspan="2" bgcolor="#FFFACD">m2x5<br>&nbsp;&nbsp;<a data-type="a" class="searchChange" style="cursor:pointer">-</a></th>
                    <th colspan="3"  bgcolor="yellow">m1x3<br><a data-type="b" class="searchChange" style="cursor:pointer">-</a></th>
                    <th colspan="2" rowspan="2" bgcolor="#FFFACD">m2x2<br><a data-type="d" class="searchChange" style="cursor:pointer">-</a></th>
                    <th colspan="2" rowspan="2" bgcolor="#FFFACD">m2x2<br><a data-type="e" class="searchChange" style="cursor:pointer">-</a></th>
                    <th rowspan="2" bgcolor="#FFFACD">m2x1<br><a data-type="f" class="searchChange" style="cursor:pointer">-</a></th>
                    <th colspan="8" rowspan="2" bgcolor="#FFFACD">m2x8<br><a data-type="g" class="searchChange" style="cursor:pointer">-</a></th>
                    <th colspan="5" rowspan="2" bgcolor="#FFFACD">m2x5<br><a data-type="h" class="searchChange" style="cursor:pointer">-</a></th>
                    <th colspan="4" bgcolor="#FFE4B5">m1x4<br><a data-type="i" class="searchChange" style="cursor:pointer">-</a></th>
                    <th colspan="4" bgcolor="#FFB6C1">m1x4<br><a data-type="j" class="searchChange" style="cursor:pointer">-</a></th>
                    <th colspan="8" rowspan="2" bgcolor="#DDA0DD">m2x8<br><a data-type="k" class="searchChange" style="cursor:pointer">-</a></th>
                </tr>
                <!-- 二级标题 -->
                <tr>
                    <th bgcolor="yellow" colspan="3">r2</th>
                    <th colspan="4" bgcolor="#FFE4B5">r2</th>
                    <th colspan="2" bgcolor="#FFB6C1">r2</th>
                    <th colspan="2" bgcolor="#FFB6C1">r2</th>
                    <th colspan="3" bgcolor="#8FBC8F">r</th>
                    <th colspan="3" bgcolor="#8FBC8F">r</th>
                </tr>
                <!--三级标题 -->
                <tr id="xx">
                    <th bgcolor="#FFFACD">r</th>
                    <th bgcolor="#FFFACD">r</th>
                    <th bgcolor="#FFFACD">r</th>
                    <th bgcolor="#FFFACD">r</th>
                    <th bgcolor="#FFFACD">r</th>
                    <th bgcolor="#FFFACD">r1</th>
                    <th bgcolor="#FFFACD">r1</th>
                    <th bgcolor="#FFFACD">r1</th>
                    <th bgcolor="#FFFACD">g</th>
                    <th bgcolor="#FFFACD">g</th>
                    <th bgcolor="#FFFACD">g1</th>
                    <th bgcolor="#FFFACD">g1</th>
                    <th bgcolor="#FFFACD">g2</th>
                    <th bgcolor="#FFFACD">f</th>
                    <th bgcolor="#FFFACD">f</th>
                    <th bgcolor="#FFFACD">f</th>
                    <th bgcolor="#FFFACD">f</th>
                    <th bgcolor="#FFFACD">f</th>
                    <th bgcolor="#FFFACD">f</th>
                    <th bgcolor="#FFFACD">f</th>
                    <th bgcolor="#FFFACD">f</th>
                    <th bgcolor="#FFFACD">s</th>
                    <th bgcolor="#FFFACD">s</th>
                    <th bgcolor="#FFFACD">s</th>
                    <th bgcolor="#FFFACD">s</th>
                    <th bgcolor="#FFFACD">s</th>
                    <th bgcolor="#FFE4B5">x</th>
                    <th bgcolor="#FFE4B5">x</th>
                    <th bgcolor="#FFE4B5">x</th>
                    <th bgcolor="#FFE4B5">x</th>
                    <th bgcolor="#FFB6C1">x1</th>
                    <th bgcolor="#FFB6C1">x</th>
                    <th bgcolor="#FFB6C1">x</th>
                    <th bgcolor="#FFB6C1">x1</th>
                    <th bgcolor="#DDA0DD">x</th>
                    <th bgcolor="#DDA0DD">x</th>
                    <th bgcolor="#DDA0DD">x</th>
                    <th bgcolor="#DDA0DD">x</th>
                    <th bgcolor="#DDA0DD">xx</th>
                    <th bgcolor="#DDA0DD">x</th>
                    <th bgcolor="#DDA0DD">x</th>
                    <th bgcolor="#DDA0DD">x</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2" rowspan="2">2x2w</td>
                    <!--<td>w</td>-->
                    <td>w</td>
                    <td>w</td>
                    <td>w</td>
                    <td colspan="2" rowspan="2">s2x2</td><!--
                    <td>s</td>-->
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>s</td>
                    <td>a</td>
                    <td>3a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>aa</td>
                    <td>s</td>
                    <td>s</td>
                    <td>s</td>
                    <td>s</td>
                    <td>d</td>
                    <td>s</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>s</td>
                    <td>f</td>
                    <td>f</td>
                    <td>d</td>
                    <td>d</td>
                    <td>d</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                </tr>
                <tr>
                    <!--<td>w</td>
                    <td>w</td>-->
                    <td>w</td>
                    <td>w</td>
                    <td>w</td>
                    <!--<td>s</td>
                    <td>s</td>-->
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>s</td>
                    <td>a</td>
                    <td>3a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>aa</td>
                    <td>s</td>
                    <td>s</td>
                    <td>s</td>
                    <td>s</td>
                    <td>d</td>
                    <td>s</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>s</td>
                    <td>f</td>
                    <td>f</td>
                    <td>d</td>
                    <td>d</td>
                    <td>d</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:jquery控制表格跨列单元格显示隐藏

评论(0)Web开发网
阅读(304)喜欢(0)JavaScript/Ajax开发技巧