Question

我想在浏览器中为显示/隐藏列设置一个cookie，因为设置已更改，因此在页面刷新时表格没有重置。

HTML

<a href="edit" id=edit>Show/Hide Columns</a>
<table id=table>
<thead> 
    <tr>
        <th id="name">Name</th>
        <th id="street">Street</th>
        <th id="number">Number</th>
    </tr>
</thead> 
<tbody>
    <tr>
        <td>Freddy</td>
        <td>Nightmare Street</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>Lost Street</td>
        <td>3456</td>
    </tr>
</tbody>
</table>

Jquery的

$('#edit').click(function() {
    var headers = $('#table th').map(function() {
        var th =  $(this);
        return {
            text: th.text(),
            shown: th.css('display') != 'none'
        };
    });

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
    $.each(headers, function() {
        h.push('<th><input type=checkbox',
               (this.shown ? ' checked ' : ' '),
               '/> ',
               this.text,
               '</th>');
    });
    h.push('</tr></thead></table></div>');
    $('body').append(h.join(''));

    $('#done').click(function() {
        var showHeaders = $('#tableEditor input').map(function() { return this.checked; });
        $.each(showHeaders, function(i, show) {
            var cssIndex = i + 1;
            var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
            if (show)
                tags.show();
            else
                tags.hide();
        });

        $('#tableEditor').remove();
        return false;
    });

    return false;
});

假设我使用按钮隐藏第1列第2列。但是当页面刷新时，列再次可见。有没有办法我们可以使用cookie来保持设置不变，直到使用相同的选项手动更改。

Answer 1

您可以使用jquery.cookie plugin：

实现此目的

$('#table th').each(function ($index, $elem) {
    var $cookie = $.cookie(this.id.toLowerCase() + ".shown");
    $index = $index + 1;
    $('#table th:nth-child(' + $index + '), #table td:nth-child(' + $index + ')').css('display', (typeof ($cookie) === "undefined" || $cookie === "true") ? "" : "none");
});

$('#edit').click(function () {
    var headers = $('#table th').map(function () {
        var th = $(this);
        var $cookie = $.cookie(th[0].id + ".shown");
        return {
            text: th.text(),
            shown: th.css('display') != "none"
        };
    });

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
    $.each(headers, function () {
        var $shown = this.shown;
        h.push('<th><input type=checkbox', ($shown ? ' checked ' : ' '),
            '/> ',
        this.text,
            '</th>');
    });
    h.push('</tr></thead></table></div>');
    $('body').append(h.join(''));

    $('#done').click(function () {
        var showHeaders = $('#tableEditor input').map(function () {
            return this.checked;
        });
        $.each(showHeaders, function (i, show) {
            var cssIndex = i + 1;
            var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
            var $id = $('#table th:nth-child(' + cssIndex + ')')[0].id;

            if (show) {
                $.cookie($id + ".shown", "true");
                tags.show();
            } else {
                $.cookie($id + ".shown", "false");
                tags.hide();
            }
        });

        $('#tableEditor').remove();
        return false;
    });

    return false;
});

Updated fiddle

Answer 2

JSfiddle https://jsfiddle.net/ZakirSiddique/qazsdbc0/5/
的 HTML Table Header Show/Hide

**HTML ** <html> <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"> </script> </head> <body> <table border="1"> <thead> <tr> <td> Cell 1 <i Title="Hide" class="fa tbtn fa-times">X</i></td> <td>Cell 2 <i Title="Hide" class="fa tbtn fa-times ">X</i></td> <td>Cell 3 <i Title="Hide" class="fa tbtn fa-times">X</i></td> </tr> </thead> <tr class="del"> <td>Row 0 Column 0</td> <td>Row 0 Column 1</td> <td>Row 0 Column 2</td> </tr> <tr class="del"> <td>Row 1 Column 0</td> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> </tr> <tr class="del"> <td>Row 2 Column 0</td> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> </tr> <tr class="del"> <td>Row 3 Column 0</td> <td>Row 3 Column 1</td> <td>Row 3 Column 2</td> </tr> <tr class="del"> <td>Row 4 Column 0</td> <td>Row 4 Column 1</td> <td>Row 4 Column 2</td> </tr> <tr class="del"> <td>Row 5 Column 0</td> <td>Row 5 Column 1</td> <td>Row 5 Column 2</td> </tr> </table> <button id="show"> Show all</button> </body> </html>

的 Jquery的 $（document）.ready（function（）{

$("thead td .tbtn").click(function () { caaell = parseInt(this.parentElement.cellIndex + 1); // alert(caaell); $('td:nth-child(' + caaell + ')').hide(); }); $("#show").click(function () { $('td').show(); }); });

<强> CSS .tbtn { 光标：指针; 浮动：权利; 填充：3％; font-size：13px; font-family：monospace;

} .tbtn:hover { opacity:0.5; } thead{ background: #184a74; color: white; }

使用cookie显示/隐藏表格列

2 个答案: