All geek questions in one place

JQuery toggles cookie table rows

I am trying to combine codes with these two questions:

The first example implements slide switches to hide or show groups of rows in a table. The second example shows how to use cookies in a group of lists that use slide switches to hide or show items in each list.

Now I would like to build a table (as in the first example) that uses cookies (as in the second example) so that the rows remain hidden or appear when the page is refreshed. I put together a code that is a hybrid of the two, but it's hard for me to figure out how to associate cookie values ​​with their respective table rows.

EDIT:

Ok, I figured it out. I rebuilt the flip and panel classes to give html a clearer structure and easier navigation. Then the solution was much easier to find. See the code in the answer section below.

+3
source share
1 answer

Here's the code (requires jquery.cookie.js to work). Almost all of the credit for this is Toby Pitman . All I did was adapt his concept of folding panels to work inside a table.

<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>
0
source

Source: https://habr.com/ru/post/1794840/

More articles:


All Articles