Tengo una tabla que contiene una tabla, también conocidas como tablas anidadas. (Persona -> Datos de mascotas por ejemplo). La primera tabla muestra a todas las personas, la segunda tabla muestra las mascotas de cada persona.
Tengo un botón que muestra la tabla anidada, esto muestra/oculta los datos de la tabla que contienen las mascotas.
JAVASCRIPT:
function toggletable(id) { var tableid = document.getElementById(id); tableid.style.display = (tableid.style.display == "table") ? "none" : "table"; }Ahora, si actualizo la página, todas las tablas vuelven a ser "ninguna". Sin embargo, quiero que si abro una tabla, es decir, haga clic en el botón que llama a la función para abrirla, si actualizo la página, debería abrirse nuevamente.
Aquí está el botón
button id="toggleTableDisplay" class="button-sma" onclick="toggleTable((php echo ($data->get('id')); ?>) php echo "Show pets"?></button>aquí está la tabla
table name="php echo ($data->get('id')); ?>" style="display: none" id="php echo ($data->get('id'));"No estoy 100% seguro de cómo funciona el formato aquí, pero tuve que cambiar el código, así que si copia/pega no funcionará porque tuve que eliminar algunos ?> etc.
Lo puse en un pastebin aquí:
localStorage mantiene pares clave->valor. Por lo tanto, puede almacenar las identificaciones de las tablas como claves (ya que ya está usando identificaciones) y un número entero 1 para el indicador de visibilidad como valor. Cuando revelas una tabla, simplemente ejecutas algo como:
localStorage.setItem(table_id, '1');Cuando lo oculte, simplemente suelte la entrada:
localStorage.removeItem(table_id);Y en la carga de la página, recorre sus tablas y les muestra si existe una entrada localStorage (jQuery aquí):
$('table').each(function(){ if( localStorage.getItem( $(this).attr('id') ) ) $(this).show(); })