Agregar una fila de tabla en jQuery

5 minutos de lectura

avatar de usuario
darryl hein

Estoy usando jQuery para agregar una fila adicional a una tabla como última fila.

Lo he hecho de esta manera:

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

¿Existen limitaciones a lo que puede agregar a una tabla como esta (como entradas, selecciones, número de filas)? ¿Hay una manera diferente de hacerlo?

  • Gracias Ash. Yo también estoy aprendiendo jQuery y me resulta difícil encontrar la mejor manera, especialmente las cosas simples. La razón por la que son 2 preguntas es porque publiqué una y luego, casi una hora después, me di cuenta de que debería haber puesto la otra y no pensé que debería cambiar la primera.

    – Darryl Hein

    6 de octubre de 2008 a las 5:53

  • Debido a esto: google.com/search?q=jquery+añadir+tabla+fila

    – Darryl Hein

    5 de octubre de 2009 a las 22:54

  • FYI: evite usar múltiples apéndices (ralentiza enormemente el rendimiento), mejor construya su cadena o use la unión de JavaScript, que es mucho más rápida.

    – Gerrit borde

    16 de abril de 2010 a las 9:32


  • ver: stackoverflow.com/a/50365764/7186739

    – desarrollador

    16 de mayo de 2018 a las 8:24

  • En caso de que la fila sea demasiado compleja, lo que hago es mantener la primera fila oculta con la estructura requerida, hacer un clon y modificar el texto e insertar después de la primera fila, de esta manera, si obtiene datos de la respuesta ajax, se creará su tabla, recuerde clonarlo fuera del ciclo, luego usarlo para modificar el contenido dentro del ciclo. $(“#mainTable tbody”).append(fila); la fila es la copia clonada modificada 🙂

    – Adán

    16 mayo 2018 a las 12:00

avatar de usuario
neil

jQuery tiene una función integrada para manipular elementos DOM sobre la marcha.

Puedes agregar cualquier cosa a tu tabla de esta manera:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

los $('<some-tag>') cosa en jQuery es un objeto de etiqueta que puede tener varios attr atributos que se pueden establecer y obtener, así como textque representa el texto entre la etiqueta aquí: <tag>text</tag>.

Esta es una sangría bastante extraña, pero es más fácil para usted ver lo que está pasando en este ejemplo.

  • bueno, +1, yo también

    – Tristán Jengibre

    30 de mayo a las 13:47

avatar de usuario
ChadT

¿Qué pasaría si tuvieras un <tbody> y un <tfoot>?

Como:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Luego insertaría su nueva fila en el pie de página, no en el cuerpo.

Por lo tanto, la mejor solución es incluir un <tbody> etiquetar y usar .appendmás bien que .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

avatar de usuario
AminM

Sé que has pedido un método jQuery. Busqué mucho y descubrí que podemos hacerlo de una mejor manera que usar JavaScript directamente con la siguiente función.

tableObject.insertRow(index)

index es un número entero que especifica la posición de la fila para insertar (comienza en 0). También se puede utilizar el valor de -1; lo que resulta en que la nueva fila se insertará en la última posición.

Este parámetro es obligatorio en Firefox y Óperapero es opcional en Internet Explorer, Cromo y Safari.

Si se omite este parámetro, insertRow() inserta una nueva fila en la última posición en Internet Explorer y en la primera posición en Chrome y Safari.

Funcionará para todas las estructuras aceptables de la tabla HTML.

El siguiente ejemplo insertará una fila al final (-1 se usa como índice):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

Espero que ayude.

avatar de usuario
pimvdb

yo recomiendo

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

Opuesto a

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>'); 

los first y last las palabras clave funcionan en la primera o última etiqueta que se inicia, no se cierra. Por lo tanto, esto funciona mejor con tablas anidadas, si no desea que se cambie la tabla anidada, sino que se agregue a la tabla general. Al menos, esto es lo que encontré.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

¿Ha sido útil esta solución?