Tengo una tabla que muestra una lista de libros, por c/u de las filas de esa tabla tengo un botón seleccionar libro.
Al hacer clic en este boton, voy mostrando c/u de los libros seleccionados en otra tabla.
Para lograr esto internamente con javascript
tengo una función createTable()
. Dentro de esta función voy guardando los libros seleccionados en un array
.
Los datos del array
los paso a una tabla y guardo esa tabla en una sessionStorage.setItem('tablaSeleccionados', table);
. La "tablaSeleccionados" tiene un botón Eliminar por cada libro.
A su vez, tengo otra funcion en javascript function showTable()
que trae la tabla "tablaSeleccionados" que guarde en la sessionStorage
para mostrarla en un div
.
Lo que quiero hacer es que, cuando el usuario haga clic en el botón eliminar de la "tablaSeleccionados", desaparezca la fila que quiere eliminar, pero al mismo tiempo esa fila también debería desaparecer de la sessionStorage
.
Caso contrario cuando vuelva a recargar la página, volvería a mostrarse la tabla sin los cambios.
Aca la functión createTable()
<script type="text/javascript">
//DECLARACION DE VARIABLES QUE SE VAN A USAR EN LAS FUNCIONES
//traigo lo que esta guardado en las sessionStorage
var json = sessionStorage.getItem("arrayId");
var json2 = sessionStorage.getItem("arrayNames");
//declaro los array
var arrId = [];
var arrNames = [];
//si las sessionStorage no estan vacias se agrega su contenido a los array
if (json != null) {
arrId = JSON.parse(json);
//show(arrId)
}
if (json2 != null) {
arrNames = JSON.parse(json2);
show(arrNames)
}
///// Traigo la tabla guardada en sessionStorage //////
var body = sessionStorage.getItem('tablaSeleccionados');
//muestro la tabla en el div #mDiv
if (body != null) {
$("#miDiv").append(sessionStorage.getItem('tablaSeleccionados'));
}
else {
window.addEventListener("load", emptyTable, false);
}
function createTable(idLibro, nombreLibro) {
var repeated = false;
//guardo los idLibro y nombres de libro en los array
arrId.push(idLibro);
arrNames.push(nombreLibro);
//Verifico que no haya datos duplicados en arrNames, si hay los borro
var cantNombres = arrNames.length;
if (cantNombres > 1) {
for (var z = 0; z < cantNombres; z++) {
var n = arrNames[z];
for (var y = z + 1; y <= cantNombres; y++) {
if (n === arrNames[y]) {
//borro datos duplicados
arrNames.splice(y, 1);
arrId.splice(y, 1);
repeated = true;
}
}
}
}
//aviso de que el libro ya fue seleccionado
if (repeated == true)
alert("Usted ya seleccionó este libro")
//guardo los array en sessionStorage
sessionStorage.setItem("arrayId", JSON.stringify(arrId));
sessionStorage.setItem("arrayNames", JSON.stringify(arrNames));
//tableItems.innerHTML = '';//limpio siempre el tbody para que Cuando vuelva a hacer click en el boton llenar tabla, no me duplique los elementos
//traigo el array guardado en el sessionStorage
var idBook = JSON.parse(sessionStorage.getItem("arrayId"));
var names = JSON.parse(sessionStorage.getItem("arrayNames"));//traigo los nombre del libro
var cantNames = names.length;//calculo cuantos elementos tiene
var cont = 0;
//************************creacion de tabla***********************************//
var table = '<table cellspacing="0" width="100%" class="table table-hover table-bordered" id="tablaSeleccionados"><thead bgcolor="#2E4053"><tr><th scope="col" style="color:#ECF0F1">Libros seleccionados</th><th scope="col" style="color:#ECF0F1">Accion</th></tr></thead><tbody><tr></tr>';
for (var i = 0; i < cantNames; i++) {
table += '<tr>';
table += '<td>' + names[i] + '</td>';
table += '<td><button onclick="deleteRow(this)" class="boton2 btn" id="btnEliminar"' + " value=" + cont + ">Eliminar</button></td>";
//table += '<td><button class="boton2 btn" id="btnEliminar"'+" value="+ idBook[i] +">Eliminar</button></td>";
table += '</tr>';
cont++;
};
table += '</tbody></table>';
//************************Fin creacion de tabla*******************************//
$('#miDiv').html(table);//muestra la tabla en el div #miDiv
//guarda la tabla en una sessionStorage
sessionStorage.setItem('tablaSeleccionados', table);
}
Aca la function showTable()
function showTable() {
//muestra la tabla en el div #miDiv
$("#miDiv").append(sessionStorage.getItem('tablaSeleccionados'));
}
Y aca el div
donde muestro la tablaSeleccionados
<div id="table-wrapper">
<div id="table-scroll">
<div id="miDiv"></div>
</div>
</div>
Estoy intentando algo como esto, es decir que cuando haga clic en el botón eliminar, llame a una function deleteRow()
.
Hasta aca funciona bien, la fila se borra, faltaría poder eliminar la fila
de la sessionStorage
.
<script type="text/javascript">
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("tablaSeleccionados").deleteRow(i);
}
</script>
<>
para agregar un ejemplo funcional ya que el codigo esta a medias!