<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" >
<title>Tabla Dinámica</title>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 10px; }
</style>
</head>
<body>
<h1>Tabla Dinámica</h1>
<input type="number" id="numRenglones" placeholder="Número de renglones">
<button id="actualizarTabla">Actualizar Tabla</button>
<table >
<thead> <!-- Cabecera -->
<tr> <!-- Renglon -->
<th>ID</th> <!-- Celda 1 -->
<th>Nombre</th> <!-- Celda 2 -->
<th>Retirar</th><!-- Celda 3 -->
</tr>
</thead>
<tbody id="tbody_tablaDinamica"> <!-- Cuerpo de la tabla -->
<!-- Aquí se insertarán los renglones dinámicamente -->
</tbody>
</table>
<script>
//********************************************************************
//SECCION PARA VARIABLES Y CONSTANTES EXTERNAS / GLOBALES
//********************************************************************
//SECCION PARA INICIAR JAVASCRIPT CUANDO
//LA PAGINA ESTE COMPLETAMENTE CARGADA
document.addEventListener('DOMContentLoaded', () =>
{ console.log("Pagina cargada y lista");
// Funcion que agrupara todos los eventos
escucharElementos();
});
//********************************************************************
//********************************************************************
//SECCION PARA AÑADIR TODOS LOS INTERCEPTORES/DETECTORES
//DE EVENTOS
function escucharElementos()
{
//Detector individual por identificador
document.getElementById('actualizarTabla').addEventListener('click', (evento) =>
{
actualizarTabla();
});
//********************************************************************
//Detector global de evento "click" para todo el documento.
// 1) Se añade un detector "global" a todo el documento de evento click
document.addEventListener("click", (evento) =>
{
// 2) El objeto contiene la clase "btnRetirar"
if (evento.target.classList.contains("btnRetirar"))
{ // Código a ejecutar cuando se presiona el elemento
let idRenglon_Activo = evento.target.dataset.idrenglon;
console.log('Se presionó el elemento ['+idRenglon_Activo+']');
retirarRenglonTabla (idRenglon_Activo);
}
//Se agregarian otros detectores de clase y su codigo respectivo
if (evento.target.classList.contains("otraClase"))
{
//... codigo ....
}
// El objeto contiene el identificador "actualizarTabla"
if (evento.target.id == "actualizarTabla")
{
console.log("Se presiono el id[actualizarTabla]");
//.... codigo .....
}
});
}
//********************************************************************
//SECCION DE FUNCIONES QUE SE USARAN POR LA PAGINA
//********************************************************************
//********************************************************************
// Función para actualizar la tabla
function actualizarTabla()
{
// Obtener el número de renglones deseado
const numRenglones = parseInt(document.getElementById("numRenglones").value);
// Validar que el número de renglones sea válido
if (isNaN(numRenglones) || numRenglones <= 0)
{
alert("Ingrese un número de renglones válido");
return;
}
//Elimina toda la información del cuerpo de la tabla
document.getElementById("tbody_tablaDinamica").innerHTML = "";
// Construye los renglones de la tabla dinámicamente
for (let indice = 1; indice <= numRenglones; indice++)
{
//Crea un nuevo elemento tr [renglon de tabla]
let row = document.createElement("tr");
// Agregar atributo data-id al renglon, este
row.dataset.ideliminar = indice;
//Construye la estructura interna del renglon
HTML_Tabla_Celdas ='';
HTML_Tabla_Celdas += '<td>'+indice+'</td>'; // Celda 1
HTML_Tabla_Celdas += '<td>Nombre '+indice+'</td>'; // Celda 2
HTML_Tabla_Celdas += '<td>'; //Celda 3
//Dentro de la celda crea un boton
HTML_Tabla_Celdas += '<button '; // Boton
//Se utiliza el atributo class para detectar su uso.
HTML_Tabla_Celdas += ' class="btnRetirar" '; // Clase btnRetirar
//Se utiliza el atributo data para definir el renglon seleccionado
HTML_Tabla_Celdas += ' data-idrenglon="'+indice+'">';
HTML_Tabla_Celdas += 'Retirar'; // Frase en el boton
HTML_Tabla_Celdas += '</button>';
HTML_Tabla_Celdas += '</td>';
// Añade la estructura de las celdas en el nuevo renglon
row.innerHTML = HTML_Tabla_Celdas;
// Añade la estructura del nuevo renglon en la tabla
document.getElementById("tbody_tablaDinamica").appendChild(row);
}
/*
//Esta es proceso dinamico para el detector de eventos
// Puedes retirar la seccion de comentario para probarlo
// asocia selector de clase [.btnRetirar] para todos los elementos
let retirarButtons = document.querySelectorAll(".btnRetirar");
//Realiza un recorrido de los todos los elementos,
//asignando cada elemento individual al objeto llamado button
retirarButtons.forEach((button) =>
{
//A cada objeto individual se le agrega el detector de eventos
//click
button.addEventListener("click", () =>
{
// Obtener el ID del boton
let idRenglon_Activo = button.dataset.idrenglon;
retirarRenglonTabla (idRenglon_Activo);
});
});
*/
}
//***************************************************************************************
function retirarRenglonTabla (renglonSeleccionado)
{
let renglon = document.querySelector('tr[data-ideliminar="'+renglonSeleccionado+'"]');
// Validar que el objeto de renglon sea válido
if ( renglon==null || renglon==undefined )
{
alert("El renglon ["+renglonSeleccionado+"] no existe");
}
else
{
alert("Renglon a eliminar ["+renglonSeleccionado+"]");
// Eliminar el renglon correspondiente
renglon.remove();
}
}
//********************************************************************
//FIN DEL SCRIPT
//********************************************************************
</script>
</body>
</html>
