Home / Questions / 313984
Accepted
Richard
Asked: 2020-12-05 23:06:14 +0800 CST 2020-12-05 23:06:14 +0800 CST

How to update a table after deleting data?

  • 772

I am trying to do the action of deleting a record from a table, created with javaScript, from the data of a array. The table is created without problems and the elimination of the data arrayworks correctly, the problem is when wanting to visualize the result.

When wanting to show the updated table, it repeats the arraybut without the deleted data, the data again, showing the previous data together with the data of the same array but without the deleted data

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>

javascript

1 Answers

  1. Best Answer

    Not only is it not updating the result of the array, but it is also duplicating the table.

    You need to empty the table before recreating it, you can do it as follows:

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

    NOTE: You can also empty with .innerHTML = '';but as you can see in the following thread in English , it does not delete the nodes in a "real" way, so it can end up giving performance problems

    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>

    • 6