Este tutorial lo ayudará a aprender cómo agregar y eliminar dinámicamente filas de tablas HTML usando JavaScript y jQuery. Esta característica de front-end se usa comúnmente para que los datos iterados se guarden en la base de datos. Esta función brinda a los usuarios finales una mejor experiencia al usar su aplicación o sitio web desarrollado. El usuario puede simplemente agregar y eliminar filas de tablas HTML sin salir de la página actual o actualizar/recargar la página.
DESCARGAR TODO EL CODIGO FUENTE y BASE DE DATOS
Creé un código fuente de aplicación simple que demuestra una manera simple que cumple con nuestro objetivo para este tutorial. El código fuente utiliza un Framework Bootstrap v5 para el diseño de la página y carga jQuery Libray para ejecutar scripts jquery.
Crear la interfaz
A continuación se muestra el código HTML que contiene los elementos HTML necesarios para esta aplicación de tutorial, como la tabla y los botones.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agregue y Elimine Dinámicamente Filas</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Agregue y Elimine Dinámicamente Filas</h1>
<hr>
<table class="table table-bordered" id="mytable">
<colgroup>
<col width="10%">
<col width="45%">
<col width="45%">
</colgroup>
<thead>
<tr>
<th class="text-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="SelectAll">
<label class="form-check-label" for="SelectAll">
SELECCIONAR TODO
</label>
</div>
</th>
<th class="text-center">Columna 1</th>
<th class="text-center">Columna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="">
<div class="form-check text-center">
<input class="form-check-input row-item" type="checkbox">
</div>
</td>
<td>12345678</td>
<td>12345678</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary btn-sm rounded-0" id="add_row" type="button">Agregar Fila</button>
<button class="btn btn-danger btn-sm rounded-0" id="delete_selected" type="button">Eliminar Fila Seleccionada</button>
</div>
</body>
</html>Script Principal
El siguiente código es un código JavaScript que ejecuta las funcionalidades de los botones y casillas de verificación en el HTML.
<script>
$(document).ready(function() {
// Add Table Row
$('#add_row').click(function() {
// Sample Data
var rand = Math.floor((Math.random() * 10) + 1);
var tr = $("<tr>")
tr.append("<td><div class='form-check text-center'><input class='form-check-input row-item' type='checkbox'></div></td>")
tr.append(`<td>${rand}</td>`)
tr.append(`<td>${rand}</td>`)
$('#mytable tbody').append(tr)
// Row Item Change Event Listener
$('tr').find('.row-item').change(function() {
if ($(".row-item").length == $(".row-item:checked").length) {
$('#SelectAll').prop('checked', true)
} else {
$('#SelectAll').prop('checked', false)
}
})
})
// Remove Selected Table Row(s)
$('#delete_selected').click(function() {
var count = $('.row-item:checked').length
if (count <= 0) {
alert("Please select atleast 1 table row to remove first.")
} else {
$('.row-item:checked').closest('tr').remove()
}
})
// Select All
$('#SelectAll').change(function() {
if ($(this).is(':checked') == true) {
$('.row-item').prop("checked", true)
} else {
$('.row-item').prop("checked", false)
}
})
// Row Item Change Event Listener
$('.row-item').change(function() {
if ($(".row-item").length == $(".row-item:checked").length) {
$('#SelectAll').prop('checked', true)
} else {
$('#SelectAll').prop('checked', false)
}
})
})
</script>El script anterior ejecuta lo siguiente:
Agregar nueva fila en la tabla
Seleccionar/Deseleccionar todos los elementos para eliminar
Eliminar elementos de filas de tablas seleccionadas
El código fuente anterior también contiene un script simple para devolver un mensaje cuando se hace clic en el botón Eliminar sin seleccionar la Fila de la tabla
DESCARGAR TODO EL CODIGO FUENTE
