jQuery toggles for table rows with cookies
I'm trying to combine the codes from these two questions:
- using jQuery to slideToggle a group of Table Rows
- jQuery toggle with cookies - collapsed state by default
The first example implements slide toggles to hide or reveal groups of rows in a table. The second example shows how to use cookies 开发者_如何学编程in a group of lists that use slide toggles to hide or reveal the items in each list.
Now I'd like to build a table (like in the first example) that uses cookies (like in the second example) so that the rows stay hidden or revealed when the page is refreshed. I've put together a code that's a hybrid of the two, but I'm having a hard time figuring out how link the cookie values with their respective table rows.
EDIT:
Okay, I figured it out. I rearranged my "flip" and "panel" classes to give my html a clearer structure and make it easier to navigate. Then the solution was much easier to find. See the code in the answers section below.
Here's the code (requires jquery.cookie.js to work). Almost all of the credit for this goes to Toby Pitman. All I did was adapt his collapsible panels concept to work inside of a table.
<html>
<head>
<style>
td {padding: 5px;}
.flip {cursor:pointer;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").addClass("active");
var flips = $(".flip").length;
for (c=0; c<=flips; c++){
var cvalue = $.cookie("panel" + c);
if ( cvalue == 'closed' + c ) {
$(".section").eq(c).css({display:"none"});
$(".section").eq(c).prev().removeClass('active').addClass('inactive');
};
};
$(".flip.active").toggle(
function(){
var num = $(".flip").index(this);
var cookieName = "panel" + num;
var cookieValue = "closed" + num;
$(this).closest("tbody").next(".section").slideUp(250);
$(this).removeClass("active");
$.cookie(cookieName, cookieValue, {path: '/', expires: 10});
},
function(){
var num = $(".flip").index(this);
var cookieName = "panel" + num;
$(this).closest("tbody").next(".section").slideDown(250);
$(this).addClass("active");
$.cookie(cookieName, null, {path: '/', expires: 10});
});
$(".flip.inactive").toggle(
function(){
var num = $(".flip").index(this);
var cookieName = "panel" + num;
$(this).closest("tbody").next(".section").slideDown(250);
$(this).addClass("active");
$(this).removeClass("inactive");
$.cookie(cookieName, null, {path: '/', expires: 10});
},
function(){
var num = $(".flip").index(this);
var cookieName = "panel" + num;
var cookieValue = "closed" + num;
$(this).closest("tbody").next(".section").slideUp(250);
$(this).removeClass("active");
$.cookie(cookieName, cookieValue, {path: '/', expires: 10});
});
});
</script>
</head>
<body>
<table id="main_table">
<thead>
<tr class="firstline">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody class="flip">
<tr style="background-color:green; color:white">
<td colspan="4"> Section 1 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 111</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
</tr>
<tr>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
<tr>
<td>item 131</td>
<td>item 132</td>
<td>item 133</td>
<td>item 134</td>
</tr>
</tbody>
<tbody class="flip">
<tr style="background-color:green; color:white">
<td colspan="4"> Section 2 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 211</td>
<td>item 212</td>
<td>item 213</td>
<td>item 214</td>
</tr>
<tr>
<td>item 221</td>
<td>item 222</td>
<td>item 223</td>
<td>item 224</td>
</tr>
<tr>
<td>item 231</td>
<td>item 232</td>
<td>item 233</td>
<td>item 234</td>
</tr>
</tbody>
<tbody class="flip">
<tr style="background-color:green; color:white">
<td colspan="4"> Section 3 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>
</tbody>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论