I was looking to store user preferences for shown/hidden columns in the browser using cookies, so that the table layout wouldn't reset upon page refresh.
Fiddle : http://jsfiddle.net/HvA4s/72/
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;
});
If I hide column 1 and column 2 using the button, they reappear upon page refresh. Is there a way to utilize cookies to maintain these settings until manually changed again using the same options?