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>