6

Estoy intentando hacer la acción de eliminar un registro de una tabla, creada con javaScript, a partir de los datos de un array. La tabla se crea sin problemas y la eliminación del dato del array funciona correctamente, el problema es al momento de querer visualizar el resultado.

Al querer mostrar la tabla actualizada me repite el array pero sin el dato eliminado los datos nuevamente, mostrando los datos anteriores junto con los datos del mismo array pero sin el dato eliminado

let array = [{"id":1,"nombre":"Nombre1","ap1":"Apellido1", "ap2":"Apellido1"}, {"id":2,"nombre":"Nombre2","ap1":"Apellido2", "ap2":"Apellido22"}, {"id":3,"nombre":"Nombre3","ap1":"Apellido3", "ap2":"Apellido23"}];


createTable(array);

function createTable(arrayNombres) {
    let tbodyAlumno = document.getElementById("tbodyAlumnos");
    for (let index = 0; index < arrayNombres.length; index++) {
    
        var fila = document.createElement("tr");
        
        var celda = document.createElement('td');
        celda.textContent = arrayNombres[index].nombre;
        fila.appendChild(celda);
    
        var celda = document.createElement('td');
        celda.textContent = arrayNombres[index].ap1;
        fila.appendChild(celda);
        
        var celda = document.createElement('td');
        celda.textContent = arrayNombres[index].ap2;
        fila.appendChild(celda);
    
            var celda1 = document.createElement('td');
            var buttonDelete = document.createElement("button");
            buttonDelete.textContent = "Eliminar";
            buttonDelete.className = "btn waves-effect cyan buttonMargin";
            buttonDelete.onclick = ()=>eliminar(arrayNombres[index].id);
        
            var buttonUpdate = document.createElement("button");    
            buttonUpdate.textContent = "Actualizar";
            buttonUpdate.className = "buttonMargin btn waves-effect cyan ";
    
            
    
            celda1.appendChild(buttonUpdate);
            celda1.appendChild(buttonDelete);
            
            
            fila.appendChild(celda1);
        
    
        tbodyAlumno.appendChild(fila);
    }   
}

function eliminar(id) {
    console.log("se presiono eliminar-->"+id);
    array.splice(array.findIndex(i => i.id==id),1);
    createTable(array);
}
<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/navbar.css">

<!-- color de lineas 26a69a -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css\autor.css">
    <link rel="stylesheet" type="text/css" href="css/general.css">
    <link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection" />
    <title>Registro de autores</title>
</head>

<body>
   
    <div class="section no-pad-bot">
        <div class="container">
            <br><br>
            <h1 class="header center orange-text"> Registro de Docentes</h1>
        </div>
    </div>
    <!-- SubTitulo -->
    <div class=" center">
        <h5 class="header col s12 light">Informacion</h5>
    </div>
    <!-- Formulario -->
    <div class="container">
        <table >
            <thead>
                <td>Nombre</td>
                <td>Primer apellido</td>
                <td>Segundo apellido</td>
                <td>Opciones</td>
            </thead>
            <tbody id="tbodyAlumnos">
            </tbody>
        </table>
        
    </div>

    <script type="text/javascript" src="js/materialize.js"></script>
    <script src="Js/crateTableAlumnos.js"></script>
</body>

</html>

1 respuesta 1

6

No solo no te esta actualizando el resultado del array, si no que ademas te esta duplicando la tabla.

Te falta vaciar la tabla antes de volverla a crear, lo puedes hacer del siguiente modo:

while (tbodyAlumno.firstChild) {
    tbodyAlumno.removeChild(tbodyAlumno.firstChild);
}

NOTA: Se puede vaciar tambien con .innerHTML = ''; pero como se puede ver en el siguiente hilo en ingles, no elimina los nodos de forma "real" por lo que puede acabar dando problemas de rendimiento

let array = [{"id":1,"nombre":"Nombre1","ap1":"Apellido1", "ap2":"Apellido1"}, {"id":2,"nombre":"Nombre2","ap1":"Apellido2", "ap2":"Apellido22"}, {"id":3,"nombre":"Nombre3","ap1":"Apellido3", "ap2":"Apellido23"}];


createTable(array);

function createTable(arrayNombres) {
    let tbodyAlumno = document.getElementById("tbodyAlumnos");
    while (tbodyAlumno.firstChild) {
        tbodyAlumno.removeChild(tbodyAlumno.firstChild);
    }
    for (let index = 0; index < arrayNombres.length; index++) {
    
        var fila = document.createElement("tr");
        
        var celda = document.createElement('td');
        celda.textContent = arrayNombres[index].nombre;
        fila.appendChild(celda);
    
        var celda = document.createElement('td');
        celda.textContent = arrayNombres[index].ap1;
        fila.appendChild(celda);
        
        var celda = document.createElement('td');
        celda.textContent = arrayNombres[index].ap2;
        fila.appendChild(celda);
    
            var celda1 = document.createElement('td');
            var buttonDelete = document.createElement("button");
            buttonDelete.textContent = "Eliminar";
            buttonDelete.className = "btn waves-effect cyan buttonMargin";
            buttonDelete.onclick = ()=>eliminar(arrayNombres[index].id);
        
            var buttonUpdate = document.createElement("button");    
            buttonUpdate.textContent = "Actualizar";
            buttonUpdate.className = "buttonMargin btn waves-effect cyan ";
    
            
    
            celda1.appendChild(buttonUpdate);
            celda1.appendChild(buttonDelete);
            
            
            fila.appendChild(celda1);
        
    
        tbodyAlumno.appendChild(fila);
    }   
}

function eliminar(id) {
    console.log("se presiono eliminar-->"+id);
    array.splice(array.findIndex(i => i.id==id),1);
    createTable(array);
}
<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/navbar.css">

<!-- color de lineas 26a69a -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css\autor.css">
    <link rel="stylesheet" type="text/css" href="css/general.css">
    <link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection" />
    <title>Registro de autores</title>
</head>

<body>
   
    <div class="section no-pad-bot">
        <div class="container">
            <br><br>
            <h1 class="header center orange-text"> Registro de Docentes</h1>
        </div>
    </div>
    <!-- SubTitulo -->
    <div class=" center">
        <h5 class="header col s12 light">Informacion</h5>
    </div>
    <!-- Formulario -->
    <div class="container">
        <table >
            <thead>
                <td>Nombre</td>
                <td>Primer apellido</td>
                <td>Segundo apellido</td>
                <td>Opciones</td>
            </thead>
            <tbody id="tbodyAlumnos">
            </tbody>
        </table>
        
    </div>

    <script type="text/javascript" src="js/materialize.js"></script>
    <script src="Js/crateTableAlumnos.js"></script>
</body>

</html>

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.