Añadiendo Filas a Tablas Eficientemente con jQuery y JavaScript

Agregar filas dinámicamente a tablas HTML es un requisito frecuente en el desarrollo web, particularmente al construir interfaces de usuario interactivas. Este tutorial demuestra métodos eficientes para lograr esto usando tanto jQuery como JavaScript puro, permitiéndole elegir el enfoque que mejor se adapte a su proyecto.

Tabla de contenido

• Agregar filas a tablas con append() y prepend() de jQuery
• Agregar filas a tablas con JavaScript puro

Agregar filas a tablas con append() y prepend() de jQuery

jQuery ofrece una forma concisa y eficiente de manipular el DOM. Sus métodos append() y prepend() se integran perfectamente con las estructuras de tablas.

Consideremos una tabla HTML de ejemplo:

<table id="myTable">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
    <tr>
  </thead>
  <tbody>
    <!-- Se añadirán filas aquí -->
  </tbody>
</table>

Para agregar una nueva fila usando jQuery:

// Obtener el cuerpo de la tabla
let $tableBody = $('#myTable tbody');

// Crear la nueva fila
let $newRow = $('<tr>');

// Crear y añadir celdas
$newRow.append('<td>Nuevo Nombre</td>');
$newRow.append('<td>30</td>');

// Añadir la fila al cuerpo de la tabla
$tableBody.append($newRow); 

Este fragmento de código selecciona el cuerpo de la tabla, crea un nuevo elemento de fila, añade celdas de datos y añade la fila completa a la tabla. Para anteponer (añadir al principio), simplemente use $tableBody.prepend($newRow);.

Para escenarios más complejos o para añadir varias filas, construir la cadena HTML de la fila directamente puede ser más eficiente:

let newRowHTML = `<tr><td>Otro Nombre</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);

Recuerde desinfectar los datos proporcionados por el usuario para prevenir vulnerabilidades XSS.

Agregar filas a tablas con JavaScript puro

Comprender el enfoque de JavaScript nativo proporciona una comprensión más profunda de la manipulación del DOM. Si bien es más verboso, evita las dependencias externas.

let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');

nameCell.textContent = 'Aún Otro Nombre';
ageCell.textContent = '40';

newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);

Este código manipula directamente el DOM usando métodos estándar de JavaScript. Elija el método que mejor se adapte a las necesidades de su proyecto y a su nivel de comodidad con jQuery. Recuerde incluir la biblioteca jQuery si usa los ejemplos de jQuery: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>