Javascript 使用cookie显示/隐藏表列_Javascript_Jquery_Html_Css_Cookies

Javascript 使用cookie显示/隐藏表列

javascript jquery html css cookies

Javascript 使用cookie显示/隐藏表列,javascript,jquery,html,css,cookies,Javascript,Jquery,Html,Css,Cookies,我想在浏览器中为显示/隐藏列设置一个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&l

我想在浏览器中为显示/隐藏列设置一个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>


名称
街头
数
弗雷迪
梦魇街
123
路易斯
迷路的街道
3456

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;
});

$（“#编辑”）。单击（函数（）{
var headers=$（'#表th'）.map（函数（）{
var th=$（本）；
返回{
text:th.text（），
显示：th.css（'display'）！='none'
};
});
var h=['Done']；
$.each（头，函数（）{
h、 推（“”，
这个文本，
'');
});
h、 推动（“”）；
$（'body'）.append（h.join（''）；
$（“#完成”）。单击（函数（）{
var showHeaders=$（'#tableEditor输入'）.map（函数（）{返回this.checked；}）；
$.each（显示标题、函数（i、显示）{
var cssIndex=i+1；
变量标记=$（“#表th:n子项（“+cssIndex+”），#表td:n子项（“+cssIndex+”））；
如果（显示）
tags.show（）；
其他的
tags.hide（）；
});
$（'#tableEditor'）。删除（）；
返回false；
});
返回false；
});

假设我使用按钮隐藏了第1列和第2列。但当页面刷新时，列将再次可见。有没有一种方法可以使用cookie保持设置不变，直到使用相同的选项手动更改为止。

您可以使用以下方法实现此目的：

$（'#表th'）。每个（函数（$index，$elem）{
var$cookie=$.cookie（this.id.toLowerCase（）+“.show”）；
$index=$index+1；
$（“#表th:n子项（“+$index+”），#表td:n子项（“+$index+”））.css（'display'，（typeof（$cookie）==”未定义“| |$cookie==”真“）？”“：”无“；
});
$（“#编辑”）。单击（函数（）{
var headers=$（'#表th'）.map（函数（）{
var th=$（本）；
var$cookie=$.cookie（th[0].id+“.show”）；
返回{
text:th.text（），
显示：th.css（'display'）！=“无”
};
});
var h=['Done']；
$.each（标题、函数（）{
var$Showed=此参数已显示；
h、 推（“”，
这个文本，
'');
});
h、 推动（“”）；
$（'body'）.append（h.join（''）；
$（“#完成”）。单击（函数（）{
var showHeaders=$（'#tableEditor输入'）.map（函数（）{
返回此文件。已检查；
});
$.each（显示标题、函数（i、显示）{
var cssIndex=i+1；
变量标记=$（“#表th:n子项（“+cssIndex+”），#表td:n子项（“+cssIndex+”））；
var$id=$（'#表th:n子项（'+cssIndex+'））[0].id；
如果（显示）{
$.cookie（$id+“.show”，“true”）；
tags.show（）；
}否则{
$.cookie（$id+“.show”，“false”）；
tags.hide（）；
}
});
$（'#tableEditor'）。删除（）；
返回false；
});
返回false；
});

JSfiddle

**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>

CSS .tbtn{ 光标：指针；浮动：对；填充：3%；字体大小：13px；字体系列：monospace

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

}

试试

jquery.cookie.js

@Morpheus在我的情况下如何工作？你能不能把一些代码放在小提琴里。这是一个快速的模型->。看起来它没有正确设置cookie，但你应该能够弄清楚。@Morpheus这工作不正常，我无法弄清楚要更改什么。你能帮忙吗？这里是现在是正确的，还有一个问题：您正在使用th.id设置cookie，我如何使用th标记文本来代替id。因为asp.net网格视图在table>th中没有id参数请忽略我的提问，所以我能够解决这个问题。

    $("thead td .tbtn").click(function () {

        caaell = parseInt(this.parentElement.cellIndex + 1);
      //  alert(caaell);
        $('td:nth-child(' + caaell + ')').hide();
    });

    $("#show").click(function () {         
        $('td').show();           
    });
});

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

}