0

我想出了折叠表格的脚本

<script type="text/javascript">
var rowVisible = true;
function toggleDisplay(tbl) {
   var tblRows = tbl.rows;
   for (i = 0; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "";
      }
   }
   rowVisible = !rowVisible;
}
</script>   


<div class="datagrid"><table id="thread_1">
<thead><tr class="headerRow">     

      <th WIDTH="100"><a href="#" onclick="toggleDisplay(document.getElementById('thread_1'))" STYLE="color: white">SLO</a></th>

它工作正常，但我的问题是我想在人们离开网站时保存状态。我想最简单的方法是使用 cookie。我只是以前没有做过这样的事情。我怎样才能做到这一点？

4

1 回答 1

0

如果您不需要支持，比如说IE7，您可以使用浏览器localStorage。

// Our flag to determine if rows are hidden or not
var rowsVisible = localStorage.getItem('rowsVisible'),
    // Table handler
    table = document.getElementById('table');

// "rowHidden" not exists in localStorage yet
if (rowsVisible === null) {
    rowsVisible = true;
} else {
   // localStorage return string
    rowsVisible = rowsVisible === 'true' ? true : false;
}

toggleDisplay(table, rowsVisible ? '' : 'none');

document.getElementById('toggleBtn').addEventListener('click', function() {
    toggleDisplay(table);
}, false);

function toggleDisplay(tbl) {    
    var tblRows = table.rows,
        mode = rowsVisible ? '' : 'none';

    for (i = 0; i < tblRows.length; i++) {
        if (tblRows[i].className != "headerRow") {
            tblRows[i].style.display = mode;
        }
    }

    localStorage.setItem('rowsVisible', rowsVisible);
    rowsVisible = !rowsVisible;
};

演示：http: //jsfiddle.net/SXAZ4/36/

于 2013-10-06T19:42:34.567 回答