jquery 实现表格列折叠

最新推荐文章于 2023-07-03 22:00:00 发布
最新推荐文章于 2023-07-03 22:00:00 发布
阅读量172 收藏
点赞数
原文链接：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
关注
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实现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 1765
表格如何实现父子结构折叠效果，jqgrid表格，jqgrid树状表格展示与实现，表格树状结构的实现，jqgrid的表格树结构实现（本地数据与文本访问）
jQuery实现报表的折叠效果（可填报）
weixin_34391445的博客
06-25 221
一：折叠报表两种实现方案 折叠报表在BS项目有着广泛的应用，在公司内部，报表工具在解决折叠报表时通常有两种方案： 1） 利用报表工具的隐藏行属性，通过传递参数刷新报表实现。 2） 通过jQuery的show(),hide()方法对报表进行tr的显示，隐藏操作。 二：两种折叠方案的对比 第一种折叠方案: 优点：js方法比较简单。 缺点：无法进行填报，每次折叠...
jQuery实现的表格展开伸缩效果实例
10-21
主要介绍了jQuery实现的表格展开伸缩效果,结合完整实例形式分析了jQuery响应鼠标事件动态修改页面元素的相关技巧,需要的朋友可以参考下
jquery实现自定义树形表格的方法【自定义树形结构table】
10-16
表格的列数据通过拼接字符串的方式插入到`<td>`标签中，这些数据可能是通过数据处理函数`dataFormat`格式化过的，以实现数据展示的统一风格。 此外，代码中还提到了`initTreeAction`函数，这个函数很可能与树形表格...
jquery 表格(展开和折叠列表项)
weixin_30787531的博客
12-05 172
HTML： View Code <ul> <li class="address">中国 <ul> <li>北京</li> <li>杭州</li&gt...
jquery表格展开折叠代码
chengmodelong的专栏
05-15 1931
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展开 折叠效果
热门推荐
ikmb的专栏
12-14 1万+
今天要做一个table的展开 折叠效果，想起以前自己收藏了一个，寻无果，索性自己做一个html xmlns="http://www.w3.org/1999/xhtml">head>    meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    title>无标题文档title>    script langu
jQuery列表展开折叠特效特效代码
03-20
jQuery列表展开折叠特效代码是一款jquery+CSS3实现的鼠标点击响应的按钮，列表渐渐缓慢展开，再次点击折叠收缩，类似折纸效果。
html5折叠表格
10-25
html5折叠表格
jquery表格展开合并
06-13
使用js和jquery实现表格的展开和合并
用Jquery简单实现表格的展开与折叠
a304096740的博客
09-21 851
　　　　作为程序员，天天都在编程与学习。好的东西简洁的代码与大家一同分享......大家多多指教......共同进步! 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2...
表格折叠的实现
fortunatelx的博客
06-10 505
效果图： function fold(sender){ var dataValue=$(sender).attr("dataValue"); if ($(sender).html() == "+"){ $(sender).html("-"); $("[name="+dataValue+"]").removeClass("fn-hide"); } else { $(sender).html("+"); $("[name.
jQuery datatable 折叠与展开
wellcome 2 天明's 博客
05-18 2002
/** * 初始化表格 * @returns */ function initHistoryAlarmInfoTable() { $('#historyAlarmInfoTable').DataTable({ language: { "lengthMenu": "每页 _MENU_ 行", "zeroRecords": "没有找到记录", "info": "当前 _START_ 到 _END_， 总共 _TOTAL_ 记录", "infoEmpty"..
jQuery 表格展开伸缩
ruxing.li 的专栏
06-29 7279
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 solid #333;width:1
使用jquery折叠列表数据
拯救大白程序猿的博客
03-01 1021
$(document).ready(function() { $("tr[id*='child']").css("display","none"); $('tr.parent').css("cursor","pointer").attr("title","点击这里展开/关闭").click(function(){ $(this).siblings('
jQuery_review之table根据内容分组进行折叠显示以及，折叠之后高亮显示的实现
似水流年
07-26 4550
对于表格而言，应当提供丰富的功能，从而让用户有不同的感觉。例如，需要根据性质进行各种分组。现在很多RIA的第三方的软件都有很多非常强大的功能来提供对数据的筛选，分类，以及各种统计。现在通过对表单元组内容的分组来进行折叠，并且对折叠之后的内容进行高亮显示。    这个地方的难点在于，如何来维护一个分组名称和分组之间的数据的关系，我们可以通过一些属性来进行维护，例如对cospan的列
jQuery插件TreeGrid在.Net平台上的树状表格实现
此外，还需要为表格列定义`<th>`元素，以便正确地显示数据。以下是一个简单的示例： ```html <th data-field="id">ID 名称 状态 ``` 接下来，使用JavaScript初始化TreeGrid。这通常在DOM加载完成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值