logo标签列表

使用jQuery和cookies实现表格行的切换

jquerycookiestoggle
3

我想将这两个问题的代码结合起来：

第一个示例实现了滑动切换，以隐藏或显示表中的一组行。第二个示例展示了如何在使用滑动切换隐藏或显示每个列表项的列表组中使用cookie。

现在，我想构建一个表格（就像第一个示例中那样），它使用cookie（就像第二个示例中那样），以便在刷新页面时保持行的隐藏或显示状态。我已经编写了一个混合了两者的代码，但我很难弄清楚如何将cookie值与其相应的表格行链接起来。

编辑：

好的，我明白了。我重新排列了我的“flip”和“panel”类，以给我的HTML提供更清晰的结构，使其更易于导航。然后解决方案就容易找到了。请参见下面答案部分中的代码。

@ CCC --> 太好了！至少为自己解决问题而喝彩！我相信有人会觉得这很有用！愿原力与你同在！;) P.S. --> 顺便说一句，这是一段很棒的代码！感谢你与社区分享。 - Roko C. Buljan
请你将你的答案从问题中移出并放到一个回答中（你可以回答自己的问题），然后接受它好吗？ - Samir Talwar
好的，Samir。已完成。 - CCC
1个回答
0
这是代码（需要jquery.cookie.js才能工作）。 几乎所有的功劳都归功于Toby Pitman。我所做的就是将他的可折叠面板概念调整为在表格内工作。
<html>
    <head>
        <style>
            td {padding: 5px;}
            .flip {cursor:pointer;}
        </style>

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $(".flip").addClass("active");

                var flips = $(".flip").length;


                for (c=0; c<=flips; c++){
                    var cvalue = $.cookie("panel" + c);
                    if ( cvalue == 'closed' + c ) {
                        $(".section").eq(c).css({display:"none"});
                        $(".section").eq(c).prev().removeClass('active').addClass('inactive');
                    };
                };

                $(".flip.active").toggle(
                    function(){
                        var num = $(".flip").index(this);
                        var cookieName = "panel" + num;
                        var cookieValue = "closed" + num;
                        $(this).closest("tbody").next(".section").slideUp(250);
                        $(this).removeClass("active");
                        $.cookie(cookieName, cookieValue, {path: '/', expires: 10});
                    },
                    function(){
                        var num = $(".flip").index(this);
                        var cookieName = "panel" + num;
                        $(this).closest("tbody").next(".section").slideDown(250);
                        $(this).addClass("active");
                        $.cookie(cookieName, null, {path: '/', expires: 10});
                    });


                    $(".flip.inactive").toggle(
                    function(){
                        var num = $(".flip").index(this);
                        var cookieName = "panel" + num;
                        $(this).closest("tbody").next(".section").slideDown(250);
                        $(this).addClass("active");
                        $(this).removeClass("inactive");
                        $.cookie(cookieName, null, {path: '/', expires: 10});
                    },
                    function(){
                        var num = $(".flip").index(this);
                        var cookieName = "panel" + num;
                        var cookieValue = "closed" + num;
                        $(this).closest("tbody").next(".section").slideUp(250);
                        $(this).removeClass("active");
                        $.cookie(cookieName, cookieValue, {path: '/', expires: 10});
                    });
            });
    </script>

        </head>

    <body>
        <table id="main_table">
            <thead>
                <tr class="firstline">
                    <th>Column1</th>
                    <th>Column2</th>
                    <th>Column3</th>
                    <th>Column4</th>
                </tr>
            </thead>
            <tbody class="flip">
                <tr style="background-color:green; color:white">
                    <td  colspan="4"> Section 1 </td>
                </tr>
            </tbody>
            <tbody class="section">
                <tr>
                    <td>item 111</td>
                    <td>item 112</td>
                    <td>item 113</td>
                    <td>item 114</td>
                </tr>
                <tr>
                    <td>item 121</td>
                    <td>item 122</td>
                    <td>item 123</td>
                    <td>item 124</td>
                </tr>
                <tr>
                    <td>item 131</td>
                    <td>item 132</td>
                    <td>item 133</td>
                    <td>item 134</td>
                </tr>
            </tbody>
            <tbody class="flip">
                <tr style="background-color:green; color:white">
                    <td  colspan="4"> Section 2 </td>
                </tr>
            </tbody>
            <tbody class="section">
                <tr>
                    <td>item 211</td>
                    <td>item 212</td>
                    <td>item 213</td>
                    <td>item 214</td>
                </tr>
                <tr>
                    <td>item 221</td>
                    <td>item 222</td>
                    <td>item 223</td>
                    <td>item 224</td>
                </tr>
                <tr>
                    <td>item 231</td>
                    <td>item 232</td>
                    <td>item 233</td>
                    <td>item 234</td>
                </tr>
            </tbody>
            <tbody class="flip">
                <tr style="background-color:green; color:white">
                    <td  colspan="4"> Section 3 </td>
                </tr>
            </tbody>
            <tbody class="section">
                <tr>
                    <td>item 311</td>
                    <td>item 312</td>
                    <td>item 313</td>
                    <td>item 314</td>
                </tr>
                <tr>
                    <td>item 321</td>
                    <td>item 322</td>
                    <td>item 323</td>
                    <td>item 324</td>
                </tr>
                <tr>
                    <td>item 331</td>
                    <td>item 332</td>
                    <td>item 333</td>
                    <td>item 334</td>
                </tr>
            </tbody>
        </table>

    </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接