Javascript 如何在cookie中存储表显示隐藏列_Javascript_Jquery

Javascript 如何在cookie中存储表显示隐藏列

javascript jquery

Javascript 如何在cookie中存储表显示隐藏列,javascript,jquery,Javascript,Jquery,我有一个示例代码来显示/隐藏表的列。我想将状态（用户选择的列）存储到cookie中，这样当用户下次来或通过页面刷新时，状态将保持不变。我听说有一个jquery cookie插件，但不知道如何使用它。我可以在下面的代码中使用jquerycookie的任何示例都将非常有用下面是示例代码 <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <s

我有一个示例代码来显示/隐藏表的列。我想将状态（用户选择的列）存储到cookie中，这样当用户下次来或通过页面刷新时，状态将保持不变。我听说有一个jquery cookie插件，但不知道如何使用它。我可以在下面的代码中使用jquerycookie的任何示例都将非常有用

下面是示例代码

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js.cookie.js"></script>

</head>
<script>
$(document).ready(function() {
  if (typeof Cookies.get('col1') !== 'undefined') {
      $(".col1").hide(); // or show() depending what you want
    }
    if (typeof Cookies.get('col2') !== 'undefined') {
      $(".col2").hide(); // or show() depending what you want
    } 
    if (typeof Cookies.get('col3') !== 'undefined') {
      $(".col3").hide(); // or show() depending what you want
    }

    $('input[type="checkbox"]').click(function() {
     /*   var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
            Cookies.set($(this).attr('name'), true);
        });
        $('th.' + $(this).attr('name')).toggle();
        Cookies.set($(this).attr('name'), true);
        */
         $('th.' + $(this).attr('name')).toggle();
        $('td.' + $(this).attr('name')).toggle();
        Cookies.set($(this).attr('name'), true);
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td class="col1">Column1</td><td class="col2">Column2</td><td class="col3">Column3</td></tr>
<tr><td class="col1">Column1</td><td class="col2">Column2</td><td class="col3">Column3</td></tr>
<tr><td class="col1">Column1</td><td class="col2">Column2</td><td class="col3">Column3</td></tr>
<tr><td class="col1">Column1</td><td class="col2">Column2</td><td class="col3">Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>


$（文档）.ready（函数（）{
if（Cookies.get（'col1'）！='undefined'）{
$（“.col1”）.hide（）；//或show（），具体取决于所需内容
}
if（Cookies.get（'col2'）！='undefined'）{
$（“.col2”）.hide（）；//或show（）取决于所需内容
} 
if（Cookies.get（'col3'）！='undefined'）{
$（“.col3”）.hide（）；//或show（），具体取决于所需内容
}
$（'input[type=“checkbox”]”）。单击（函数（）{
/*var index=$（this.attr（'name'）.substr（3）；
索引--；
$（'table tr'）。每个（函数（）{
$（'td:eq（'+index+'），this.toggle（）；
Cookies.set（$（this.attr（'name'），true）；
});
$（'th.+$（this.attr（'name'））.toggle（）；
Cookies.set（$（this.attr（'name'），true）；
*/
$（'th.+$（this.attr（'name'））.toggle（）；
$（'td.+$（this.attr（'name'））.toggle（）；
Cookies.set（$（this.attr（'name'），true）；
});
});
标题1
标题2
标题3
第1列第2列第3列
第1列第2列第3列
第1列第2列第3列
第1列第2列第3列
隐藏/显示列1

隐藏/显示第2列

隐藏/显示第3列

您可以使用此Javascript API使cookie访问变得非常简单：

示例（针对您的问题）：

稍后再获取：

if (typeof Cookies.get('col1') !== 'undefined') // col1 shown
if (typeof Cookies.get('col2') !== 'undefined') // col2 shown
if (typeof Cookies.get('col3') !== 'undefined') // col3 shown

编辑：集成在您的示例中。您需要将“colX”类添加到该列的所有td元素中才能实现这一点（最初也可以隐藏或显示它们）。除此之外还有其他方法，但这是最快的：

$(document).ready(function() {
    if (typeof Cookies.get('col1') !== 'undefined') {
      $(".col1").hide(); // or show() depending what you want
    }
    if (typeof Cookies.get('col2') !== 'undefined') {
      $(".col2").hide(); // or show() depending what you want
    } 
    if (typeof Cookies.get('col3') !== 'undefined') {
      $(".col3").hide(); // or show() depending what you want
    }
    $('input[type="checkbox"]').click(function() {
        $('th.' + $(this).attr('name')).toggle();
        $('td.' + $(this).attr('name')).toggle();
        Cookies.set($(this).attr('name'), true);
    });
});

我会使用cookie，因为每个请求都会被发送到服务器。。。每个图像、资源文件等。当服务器不知道有关此cookie的任何信息时，无需添加额外的不必要的负载

标题单元格上已经有一个匹配的类，如果将相同的类添加到所有其他单元格中，则可以使用输入的

名称

来匹配这些类

在localStorage中存储阵列，并执行以下操作：

// get data from storage and convert from string to array
var hiddenCols = JSON.parse(localStorage.getItem('hidden-cols') || '[]'),
  $checkBoxes = $('.col-check'),
  $rows = $('#myTable tr');
// loop over array and hide appropriate columns and check appropriate checkboxes
$.each(hiddenCols, function(i, col) {
  $checkBoxes.filter('[name=' + col + ']').prop('checked', true)
  $rows.find('.' + col).hide();
});  

$checkBoxes.change(function() {
  // toggle appropriate column class
  $('table .' + this.name).toggle(!this.checked);
  // create and store new array
  hiddenCols = $checkBoxes.filter(':checked').map(function() {
    return this.name;
  }).get();
  localStorage.setItem('hidden-cols', JSON.stringify(hiddenCols))
});

感谢您的时间。Javascript新手，有没有办法，你能帮助我如何将其集成到我的答案中。根据您的需要，这可能不是最好的解决方案，但您应该能够继续。我需要定义Cookie吗？您需要在html标题中包含我链接的插件

尝试过，但当我刷新时，它不起作用。。这必须在服务器上运行吗？我只是把它保存到我的桌面上，然后从那里开始运行。。让我来编辑代码。谢谢，这很有效。如何避免闪烁。。我想，当它加载时，它会显示然后隐藏列。你是在普通页面而不是在演示中尝试的吗？可以在默认情况下隐藏行，并在页面加载时执行相反的操作（如果有帮助的话）。或者使用加载覆盖…可以使用很多视觉解决方法

// get data from storage and convert from string to array
var hiddenCols = JSON.parse(localStorage.getItem('hidden-cols') || '[]'),
  $checkBoxes = $('.col-check'),
  $rows = $('#myTable tr');
// loop over array and hide appropriate columns and check appropriate checkboxes
$.each(hiddenCols, function(i, col) {
  $checkBoxes.filter('[name=' + col + ']').prop('checked', true)
  $rows.find('.' + col).hide();
});  

$checkBoxes.change(function() {
  // toggle appropriate column class
  $('table .' + this.name).toggle(!this.checked);
  // create and store new array
  hiddenCols = $checkBoxes.filter(':checked').map(function() {
    return this.name;
  }).get();
  localStorage.setItem('hidden-cols', JSON.stringify(hiddenCols))
});