En este artículo, aprenderemos cómo agregar/eliminar dinámicamente filas de una tabla HTML usando jQuery. Antes de leer este artículo, asegúrese de tener una idea básica sobre jQuery. Si no, puede aprenderlo de los enlaces mencionados a continuación.
Código HTML: Comencemos definiendo la estructura HTML básica de la página web.
html
<body> <div class="container pt-4"> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th class="text-center">Row Number</th> <th class="text-center">Remove Row</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> </div> <button class="btn btn-md btn-primary" id="addBtn" type="button"> Add new Row </button> </div> </body>
Inicialmente, la tabla está vacía y no tiene filas. Comenzaremos agregando filas dinámicamente dentro del cuerpo de la tabla y luego veremos cómo eliminar una fila de la tabla.
Agregar una fila:
para agregar una fila, defina una variable que mantenga la cuenta del número total que ahora existe en la tabla. Luego usaremos el evento de «clic» de jQuery para detectar un clic en el botón Agregar fila y luego usaremos el método .append() de jQuery para agregar una fila en la tabla. A cada elemento de fila se le ha asignado un id Ri que luego usaremos para eliminar una fila. Cada elemento tiene una columna de índice de fila y elimina la columna de botón. El código es el siguiente.
javascript
// Node.js program to demonstrate the
// Node.js filehandle.read() Method
// Denotes total number of rows.
var rowIdx = 0;
// jQuery button click event to add a row.
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<p>Row ${rowIdx}</p></td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
});
Nota: `R${var}` es una forma de concatenar una variable con una string en la nueva sintaxis de JavaScript ES6.
Eliminar una fila: Eliminar una fila es un poco complicado. Hay dos problemas. En primer lugar, como cada fila se agrega dinámicamente, no podemos detectar el clic de un botón de eliminación directamente mediante el evento jQuery «clic», ya que es un enlace «directo» que adjuntará el controlador a los elementos ya existentes. No se vinculará a los elementos futuros. En segundo lugar, cuando eliminamos una fila, necesitaremos mantener el índice, es decir, si eliminamos la segunda fila, la tercera fila se convierte en la segunda y, por lo tanto, necesitamos modificar la identificación y el texto del índice de la fila.
Para abordar el primer problema, usaremos la delegación y luego podremos manejar los eventos de un elemento agregado dinámicamente.
Para abordar el segundo problema, obtendremos todas las filas al lado de la fila en la que se hace clic en el botón Eliminar usando el método .nextAll() de jQuery y luego iteramos a través de cada uno de estos elementos para modificar el índice de fila y la identificación de fila. El código es el siguiente:
javascript
// Node.js program to demonstrate the
// Node.js filehandle.read() Method
// jQuery button click event to remove a row
$('#tbody').on('click', '.remove', function () {
// Getting all the rows next to the
// row containing the clicked button
var child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function () {
// Getting <tr> id.
var id = $(this).attr('id');
// Getting the <p> inside the .row-index class.
var idx = $(this).children('.row-index').children('p');
// Gets the row number from <tr> id.
var dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing the total number of rows by 1.
rowIdx--;
});
Este código se puede modificar de varias formas según las necesidades. Por ejemplo, puede intentar corregir la primera fila de la tabla, de modo que siempre exista al menos una fila dentro del cuerpo de la tabla. Uno no debería poder eliminar la fila si el recuento de filas es uno.
Código final: El siguiente código es la combinación de las secciones anteriores.
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<script>
$(document).ready(function () {
// Denotes total number of rows
var rowIdx = 0;
// jQuery button click event to add a row
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<p>Row ${rowIdx}</p>
</td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
});
// jQuery button click event to remove a row.
$('#tbody').on('click', '.remove', function () {
// Getting all the rows next to the row
// containing the clicked button
var child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function () {
// Getting <tr> id.
var id = $(this).attr('id');
// Getting the <p> inside the .row-index class.
var idx = $(this).children('.row-index').children('p');
// Gets the row number from <tr> id.
var dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing total number of rows by 1.
rowIdx--;
});
});
</script>
</head>
<body>
<div class="container pt-4">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">Row Number</th>
<th class="text-center">Remove Row</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<button class="btn btn-md btn-primary"
id="addBtn" type="button">
Add new Row
</button>
</div>
</body>
</html>
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por vasundharashukla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA