0

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>

1
  • podrias utilizar la opcion fragemento javascript cuyo icono es <> para agregar un ejemplo funcional ya que el codigo esta a medias!
    – Bryro
    Commented el 10 mar. 2020 a las 14:17

1 respuesta 1

0

Creo que lo que intentas es algo como esto:

nota: window.load ni sessionstorage funcionan en stackoverflow

	// guardar en el sessionStorage
    function save(name){
    	let current_id;
    	let data = get();

		if(data){
			current_id = data["current_id"];
			data["libros"].push({"id":current_id, "name" : name});
			data["current_id"] = current_id+1;

		}else{
			data = {"current_id": 1,"libros":[]};
			data["libros"].push({"id":0, "name" : name});
		}

		sessionStorage.setItem("libros", JSON.stringify(data));

		return true;
    }

    // get datos del sessionStorage
    // si se especifica find es para buscar uno en concreto
    function get(find = null){
    	let data = sessionStorage.getItem("libros");

		if(data){
			if(find){
				for(x in data["libros"]){
    				if(parseInt(data["libros"][x].id) === parseInt(id)){
    					return x;
    				}
    			}
    		}
			return JSON.parse(data);
		}
		return false;
    }

    // eliminar del sessionStorage
    function del(id){
    	let data = get();
    	let postition = get(id);

    	if(postition){
    		data["libros"].splice(postition,1);
    		sessionStorage.setItem("libros", JSON.stringify(data));
    		return true;
    	}
    	return false;
    }

    // edita del sessionStorage
    function edit(id,name){
    	let data = get();
    	let postition = get(id);
    	if(postition){
			data["libros"][postition]["name"] = name;
			sessionStorage.setItem("libros", JSON.stringify(data));
			return true;
    	}
    	return false;
    }
   
    // remover elementos tanto del session como del dom
    function remove(id){
    	let el = document.querySelector('tbody tr[id="'+id+'"]');
    	el.parentNode.removeChild(el);
    	del(id);
    }

    // insertar elementos
    function insertRow(name){
    	save(name);
    	let data = get();

    	if(data){
    		let count = Object.keys(data["libros"]).length-1;
    		createRow(data["libros"][count].id,data["libros"][count].name);
    		return true;
    	}

    	return false;
    }

    // crear nuevas filas
    function createRow(id,name){
    	//let 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></tbody></table>';

    	let data =get();
    	let el = document.querySelector("tbody");

    	let row = '<tr id="'+id+'">';
        row += '<td>' + name + '</td>';
        row += '<td><button onclick="remove('+id+')" class="boton2 btn" id="btnEliminar"' + " value=" + id + ">Eliminar</button>";
        //row += '<button onclick="editar('+id+')" class="boton2 btn" id="btnEliminar"' + " value=" + id + ">editar</button><td>";
        row += '</tr>';
        el.innerHTML = el.innerHTML + row;
    }


    // mostrar todo lo guardado en el sessionstorage
    function showAll(){
    	//si queremos que se pinte la tabla aun si no hay elementos

    	let 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></tbody></table>';
    	document.querySelector('#miDiv').innerHTML = table; 

    	let data = get();
    	if(data){
    		for(x in data["libros"]){
    			createRow(data["libros"][x].id,data["libros"][x].name);
    		}
    	}
    }

    // esperamos hasta que todo el documento carge.
    // nota: window.load ni sessionstorage funcionan en stackoverflow
    
    window.onload = showAll();
    //showAll();
    document.querySelector("form").addEventListener("submit",function(e){
    	e.preventDefault();
    	insertRow(e.target.querySelector("input").value);
    	e.target.querySelector("input").value = "";
    })
<div id="table-wrapper">
<!-- start test form -->
	<form action=""><input type="text" name="add" placeholder="Nombre Libro"> <button type="submit">add</button></form><br>
  <!-- end test form -->
        <div id="table-scroll">
            <div id="miDiv"></div>
        </div>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.