jquery 实现表格列折叠

最新推荐文章于 2022-09-09 10:59:23 发布
最新推荐文章于 2022-09-09 10:59:23 发布
阅读量147 收藏
点赞数
原文链接：http://www.cnblogs.com/xuruhong/p/3271747.html
版权

效果图

 

<!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></title>
    <script language="javascript" src="../Scripts/jquery-1.4.1.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            //图片链接
            $("img").click(function () {
                alert(this.id);
            });
            //隐藏内容列，插入空列用于占位
            $(":radio[tag='0']").click(function () {
                var colIndex = 0;

                var th = $(this).parent();
                var tr = $(th).parent();
                var table = $(tr).parent();
                var ths = $(tr).find("th");
                //alert(ths[3]);
                var row = $(table).find("tr").index(tr);
                var col = $(tr).find("th").index(th);
                var colspan = $(th).attr("colspan");

                for (var i = 0; i < col; i++) {
                    var temp = $(ths[i]).attr("colspan");
                    colIndex += temp;
                }
                //alert("index=" + colIndex);
                //alert("row=" + row + " col=" + col + " colspan=" + colspan);

                for (var i = colIndex; i < colIndex + colspan; i++) {
                    $("td:eq(" + i + ")", $("tr:gt(1)")).hide();
                    $("td:eq(" + (i-2) + ")", $("tr:eq(1)")).hide();
                }
                $(th).hide();


                $(th).before("<th> <input type=\"radio\" tag='1'/></th>");
                $("td:eq(" + colIndex + ")", $("tr:gt(1)")).before("<td></td>");
                $("td:eq(" + (colIndex-2) + ")", $("tr:eq(1)")).before("<td></td>");
            });
            //显示内容列，删除空列
            $(":radio[tag='1']").live("click", function () {
                var colIndex = 0;

                var th = $(this).parent();
                var tr = $(th).parent();
                var table = $(tr).parent();
                var ths = $(tr).find("th");

                var row = $(table).find("tr").index(tr);
                var col = $(tr).find("th").index(th);

                var taskth = $(ths[col + 1]);
                var colspan = $(taskth).attr("colspan");

                for (var i = 0; i < col; i++) {
                    var temp = $(ths[i]).attr("colspan");
                    colIndex += temp;
                }

                for (var i = colIndex + 1; i < colIndex + colspan + 1; i++) {
                    $("td:eq(" + i + ")", $("tr:gt(1)")).show();
                    $("td:eq(" + (i - 2) + ")", $("tr:eq(1)")).show();
                }
                $(taskth).show();

                $(th).remove();
                $("td:eq(" + colIndex + ")", $("tr:gt(1)")).remove();
                $("td:eq(" + (colIndex - 2) + ")", $("tr:eq(1)")).remove();
            });

        });

    </script>

    <style type="text/css">
        table
        {
            border-collapse: collapse;
            border: none;
            table-layout:fixed;
        }
        td
        {
          text-align:center;
          width: 30px;
          overflow:hidden;
          white-space:nowrap;
          border: solid #000 1px;
        }
        th
        {
            width : 30px;
            overflow:hidden;
            white-space:nowrap;
            border: solid #000 1px;
        }
        img
        {
            CURSOR: hand;    
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <th align="center" class="style1" rowspan="2">
                名称</th>
            <th align="center" class="style2" rowspan="2">
                得分</th>

            <th align="center" class="style3" colspan="2">
                <input id="Radio1" name="R1" type="radio" value="V1" tag="0"/><br />
                任务1</th>

            <th align="center" class="style4" colspan="2">
                <input id="Radio2" name="R2" type="radio" value="V1" tag="0"/><br />
                任务2</th>
            <th align="center" class="style4" colspan="3">
                <input id="Radio3" name="R2" type="radio" value="V1" tag="0"/><br />
                任务3</th>
        </tr>
        <tr>
            <td>
                列列列1</td>
            <td>
                列列列2</td>

            <td>
                列列列3</td>
            <td>
                列列列4</td>

            <td>列列列5</td>
            <td>列列列6</td>
            <td>列列列7</td>
            
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="1" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="2" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="3" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="4" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img1" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img2" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img3" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>

        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img4" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img5" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img6" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img7" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img8" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img9" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img10" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>

        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img11" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img12" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img13" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img14" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img15" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img16" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img17" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img18" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img19" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img20" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img21" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img22" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img23" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img24" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img25" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img26" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img27" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img28" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img29" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img30" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img31" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img32" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img33" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img34" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img35" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img36" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img37" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img38" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img39" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img40" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img41" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img42" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img43" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img44" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img45" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img46" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img47" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img48" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img49" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img50" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img51" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img52" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img53" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img54" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img55" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img56" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img57" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img58" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img59" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img60" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img61" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img62" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img63" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img64" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img65" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img66" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img67" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img68" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img69" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img70" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img71" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img72" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img73" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img74" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img75" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img76" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img77" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img78" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img79" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img80" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img81" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img82" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img83" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img84" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img85" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img86" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img87" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img88" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img89" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img90" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img91" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img92" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img93" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img94" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img95" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img96" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img97" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img98" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img99" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img100" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img101" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
        <tr>
            <td>
                ne1</td>
            <td >
                99</td>

            <td>
                <img id="Img102" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                <img id="Img103" alt="" src="../images/blue_button_bg.gif" /></td>

            <td>
                <img id="Img104" alt="" src="../images/blue_button_bg.gif"/></td>
            <td>
                 <img id="Img105" alt="" src="../images/blue_button_bg.gif" /></td>

            <td><img id="Img106" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img107" alt="" src="../images/blue_button_bg.gif" /></td>
            <td><img id="Img108" alt="" src="../images/blue_button_bg.gif" /></td>
        </tr>
    </table>
    <div>
    </div>

</body>
</html>

 

转载于:https://www.cnblogs.com/xuruhong/p/3271747.html

weixin_30496751
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery实现table行折叠效果以JSON做数据源
12-03
代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title></title> [removed][removed] <script type=”tex
【表格树状】jqgrid表格树状折叠效果实现（附代码，留邮箱发demo）
最新发布
赏樱看雪撸代码
07-03 1285
表格如何实现父子结构折叠效果，jqgrid表格，jqgrid树状表格展示与实现，表格树状结构的实现，jqgrid的表格树结构实现（本地数据与文本访问）
html 表单折叠实现,jQuery实现表格展开与折叠的方法
weixin_34608787的博客
05-30 1145
本文实例讲述了jQuery实现表格展开与折叠的方法。分享给大家供大家参考。具体分析如下：这是很人性化的一款特效代码，实现点击其中一个父级，另一个之前打开的父级会自动关闭jQuery表格展开折叠，默认折叠table{ border:0;border-collapse:collapse;}td{ font:normal 12px/17px Arial;padding:2px;width:100px;}...
实现表格的折叠
会写Bug的攻城狮
09-09 643
实现表格的折叠
jQuery列表展开折叠特效特效代码
03-20
jQuery列表展开折叠特效代码是一款jquery+CSS3实现的鼠标点击响应的按钮，列表渐渐缓慢展开，再次点击折叠收缩，类似折纸效果。
jQuery实现的表格展开伸缩效果实例
10-21
主要介绍了jQuery实现的表格展开伸缩效果,结合完整实例形式分析了jQuery响应鼠标事件动态修改页面元素的相关技巧,需要的朋友可以参考下
datatable实现多级展开和折叠
03-17
datatable实现多级展开和折叠
Bootstrap与jQuery UI框架设计（前端开发工程师系列）
05-29
2 表格 3 CSS组件 3.1 表单 3.2 输入框组 3.3 图标 3.4 下拉菜单 操作案例2：制作收集用户信息页面 3.5 按钮组 3.6 导航和导航条 操作案例3：制作导航栏 3.7 缩略图 3.8 媒体对象 本章总结 本章作业 第4章 Bootstrap...
jQuery EasyUI 1.3 API 中文教程
05-30
动态改变数据表格列 格式化数据表格列 数据表格设置排序 数据表格自定义排序 数据表格添加复选框 数据表格自定分页工具栏 数据表格行内编辑器 扩展数据表格行内编辑器 数据表格列运算 合并数据...
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z
12-14
　6.1.5　带有emoji图标的五列表格 　6.1.6　多行表格 　6.1.7　不相等的表格 　6.1.8　springboard 　6.2　可折叠的内容块 　6.3　可折叠的设置 　6.4　使用css渐变进行样式化 　6.5　总结 第7章　创建可主题化的...
jQuery实现表格展开与折叠的方法
12-11
本文实例讲述了jQuery实现表格展开与折叠的方法。分享给大家供大家参考。具体分析如下： 这是很人性化的一款特效代码，实现点击其中一个父级，另一个之前打开的父级会自动关闭 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery表格展开折叠，默认折叠</title> <style> table{ border:0;border-collapse:collapse;} td{ font:normal 12px/17px Arial;padding:2px;width:100px;} th{ font:bold 12
jquery表格展开合并
06-13
使用js和jquery实现表格的展开和合并
[jquery]折叠指定条件的表格
weixin_30530939的博客
05-06 103
最近在做财务报表时候，一些表格要做特定折叠效果 这里通过2个自定义属性来对表格之间的属性作关联 date-head和date-num，输出表格时候，可以按照这2个自定义属性给某些带父子层级关系的内容指定关联关系 再通过jquery获取这些具有相当关联关系的表格作出折叠效果 效果图 先上jquery $(document).ready(function(e) { $...
jquery表格展开折叠代码
chengmodelong的专栏
05-15 1907
jquery表格展开折叠代码 table{ border:0;border-collapse:collapse;} td{ font:normal 12px/17px Arial;padding:2px;width:100px;} th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px sol
jquery实现table表展开和收缩
热门推荐
fumier的专栏
01-20 1万+
jquery实现table表展开和收缩
jquery 实现表格排序功能
06-08
要使用 jQuery 实现表格排序功能，可以按照以下步骤进行： 1. 给表头添加点击事件，获取当前点击的列的索引值。 2. 根据索引值，获取该列的值并进行排序。 3. 根据排序结果，重新渲染表格。 下面是一个示例代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值