I have a table containing a table, aka nested tables. (Person -> Pets data for example). First table displays all people, second table shows pets for each person.
I have a button which shows the nested table, this shows/hides the table data containing the pets.
JAVASCRIPT:
function toggletable(id) {
var tableid = document.getElementById(id);
tableid.style.display = (tableid.style.display == "table") ? "none" : "table";
}
Now, if I refresh the page all tables are "none" again. However, I want so that if I open a table, aka click on the button that calls the function to open it, if I refresh the page it should be open again.
Here is the button
button id="toggleTableDisplay" class="button-sma" onclick="toggleTable((php echo ($data->get('id')); ?>) php echo "Show pets"?></button>
Here is the table
table name="php echo ($data->get('id')); ?>" style="display: none" id="php echo ($data->get('id'));"
I'm not 100% sure how the formatting here works but I had to change the code so if you copy/paste it won't work as I've had to remove some ?> etc.
I put it in a pastebin here:
localStorage keeps key->value pairs. So you might store tables id's as keys (since you'r using id's already) and an integer 1 for visibility flag as a value. When you reveal a table you just run something like:
localStorage.setItem(table_id, '1');
When you hide it, just drop the entry:
localStorage.removeItem(table_id);
And on page load you walk through your tables and show them if localStorage entry exists (jQuery here):
$('table').each(function(){
if( localStorage.getItem( $(this).attr('id') ) )
$(this).show();
})