Ayuda con una función para eliminar datos de una tabla
Publicado por Brut (1 intervención) el 24/03/2024 23:03:20
Buen día. Estoy programando una tabla que recibe datos desde un formulario html. El problema está en que cada dato insertado a la tabla debe ser eliminado al dar clic a un botón para eliminar específicamente una solicitud. Pues bien, en este caso el código parece no funcionar, pues si bien tengo el JavaScript que en teoría debería eliminar los datos del almacenamiento local y la fila de la tabla, cuando hago clic al botón eliminar no hace nada.
El código que he probado es el siguiente:
El código que inserta los datos y añade el correspondiente botón de eliminar:
También anexo el html de la tabla:
El código que he probado es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
function deleteRequest(requestId) {
var confirmDelete = confirm('¿Estás seguro de que quieres eliminar esta solicitud?');
if (confirmDelete) {
localStorage.removeItem(requestId);
var table = document.getElementById('dataReceivedTable').getElementsByTagName('tbody')[0];
var row = document.querySelector('tr[data-request-id="' + requestId + '"]');
if (row) {
table.removeChild(row);
} }}El código que inserta los datos y añade el correspondiente botón de eliminar:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.addEventListener('DOMContentLoaded', function() {
// Función para insertar los datos en la tablafunction insertDataIntoTable(data, requestId) {
var table = document.getElementById('dataReceivedTable');
var row = table.insertRow();
row.setAttribute('data-request-id', requestId);
var actions = '<button class="delete-btn" onclick="deleteRequest(\'' + requestId + '\')">Eliminar</button>' +
'<button class="edit-btn" onclick="editRequest(\'' + requestId + '\')">Editar</button>';
row.innerHTML = `
<td>${xxxx}</td>
<td>${xxxx}</td>
<td>${xxxx}</td>
// Continuación del código para insertar los datos en la tabla`;
}Object.keys(localStorage).forEach(function(key) {
if (key.startsWith('REQ')) {
var requestData = JSON.parse(localStorage.getItem(key));
insertDataIntoTable(requestData, key);
}});
});
También anexo el html de la tabla:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<thead>
<tr>
<th>COLUMNA 1</th>
<th>COLUMNA 2</th>
<th>COLUMNA 3</th>
<!-- Continuación de las columnas --><th>COLUMNA 11</th>
</tr>
</thead>
<tbody id="dataReceivedTable">
</tbody>
</table>
</div>
Valora esta pregunta
0
