Agregando una fila de tabla en jQuery: tutorial para principiantes y profesionales

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Cómo agregar una fila a una tabla con jQuery: guía completa

Trabajar con tablas HTML es una de las tareas más comunes para un desarrollador frontend. Y agregar dinámicamente nuevas filas a una tabla es todo un clásico. Imagina: estás creando una tienda en línea, un panel de administración para un blog o un sistema de gestión de tareas. Casi siempre es necesario que el usuario pueda hacer clic en un botón "Agregar" y que aparezca un nuevo registro en la tabla.

Hoy analizaremos en detalle cómo agregar una fila de tabla en jQuery. Esto no es solo teoría seca, sino un tutorial práctico paso a paso con ejemplos de código reales. Conocerás los métodos más populares, los posibles problemas y las mejores prácticas. ¡Vamos allá!

¿Por qué jQuery y no JavaScript puro?

Es una pregunta válida. Sí, el JavaScript nativo puede trabajar con el DOM desde hace tiempo, y el método document.createElement no ha sido eliminado. Pero jQuery para agregar una fila de tabla se aprende más rápido y es más fácil, especialmente si eres principiante. jQuery se encarga de la compatibilidad entre navegadores y ofrece una sintaxis elegante. Además, millones de líneas de código en producción están escritas en jQuery, y es necesario mantenerlas. Por lo tanto, conocer estas técnicas es una habilidad obligatoria para un desarrollador web.

HTML básico para nuestros experimentos

Para empezar, necesitaremos una tabla simple. Aquí tienes su marcado: cópialo en tu archivo HTML o en un sandbox como CodePen.

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <title>Agregar fila a tabla jQuery</title>    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script></head><body>

<h2>Lista de empleados</h2><table id="employees" border="1">    <thead>        <tr>            <th>Nombre</th>            <th>Cargo</th>            <th>Salario</th>        </tr>    </thead>    <tbody>        <tr>            <td>Ana</td>            <td>Desarrolladora</td>            <td>150 000 ₽</td>        </tr>        <tr>            <td>Iván</td>            <td>Diseñador</td>            <td>120 000 ₽</td>        </tr>    </tbody></table>

<button id="addRow">Agregar fila</button>

<script>// Aquí irá nuestro código jQuery</script>

</body></html>

Observa que la tabla tiene thead (encabezado) y tbody (cuerpo). Esta es una estructura semántica correcta. Agregar una fila a la tabla con jQuery lo haremos precisamente en tbody, no en la tabla misma, para no romper los encabezados.

Método n.º 1: jQuery append — el clásico

La forma más popular es usar el método .append(). Este agrega contenido al final del elemento seleccionado. En nuestro caso, al final de tbody.

Supongamos que queremos agregar un nuevo empleado. El código sería así:

$('#addRow').on('click', function() {    var newRow = '<tr>' +                 '<td>Pedro</td>' +                 '<td>Gerente</td>' +                 '<td>100 000 ₽</td>' +                 '</tr>';    $('#employees tbody').append(newRow);});

Todo es genialmente simple: armamos una cadena HTML con la nueva fila de la tabla y la insertamos usando jQuery agregar fila de tabla con el método append. Ahora, cada vez que se hace clic en el botón, aparece Pedro el gerente en la tabla.

Importante: si no tienes tbody en el marcado, jQuery podría agregar la fila directamente en table, pero en ese caso podría insertarse en el lugar incorrecto. ¡Usa siempre tbody!