1445 votos

Añadir fila de la tabla en jQuery

¿Cuál es el mejor método de jQuery para agregar una fila a una tabla como la última fila?

Actualización

Es esto aceptable:

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

Hay limitaciones a lo que puede agregar a una tabla como esta (tales como entradas, selecciona, el número de filas)?

1369voto

Luke Bennett Puntos 16100

El enfoque sugiere usted no está garantizado para darle los resultados que usted está buscando - ¿qué pasa si usted tenía tbody por ejemplo:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Se terminaría con la siguiente:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Por lo tanto, se recomienda este enfoque en su lugar:

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

Usted puede incluir cualquier cosa dentro de la after() método, siempre y cuando sea válido HTML, incluyendo varias filas como en el ejemplo anterior.

Actualización: Revisando esta respuesta después de la reciente actividad con esta pregunta. eyelidlessness hace un buen comentario de que siempre habrá un tbody en el DOM; esto es cierto, pero sólo si hay al menos una fila. Si usted no tiene filas, no habrá tbody menos que haya especificado una tú mismo.

DaRKoN_ sugiere anexar a la tbody , en lugar de añadir contenido después de la última tr. Esto se pone en torno a la cuestión de no tener filas, pero aún no es a prueba de balas como teóricamente podría tener múltiples tbody elementos y la fila a la que se agregarán a cada uno de ellos.

Pesaje de todo, no estoy seguro de que hay una sola solución que cuentas para cada uno de los escenarios posibles. Usted tendrá que asegurarse de que el código jQuery concuerda con su marcado.

Creo que la solución más segura es, probablemente para asegurarse de que su table siempre incluye al menos un tbody en su margen de beneficio, incluso si no tiene filas. Sobre esta base, puede utilizar el siguiente que va a trabajar, sin embargo el número de filas que tiene (y también cuenta múltiples tbody elementos):

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

478voto

Neil Puntos 5343

jQuery tiene un mecanismo integrado para manipular el DOM de los elementos sobre la marcha.

Usted puede agregar nada a su tabla como esta:

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

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

Esto es algo bastante raro, sangría, pero es más fácil ver lo que está pasando en este ejemplo.

210voto

SalmanPK Puntos 6649

Así que las cosas han cambiado desde que @Lucas Bennett respondió a esta pregunta. Aquí está una actualización.

jQuery desde la versión 1.4(?) detecta automáticamente si el elemento que está tratando de insertar (usando cualquiera de los append, prepend, before o after métodos) es un <tr> y la inserta en la primera <tbody> en tu mesa o en la envuelve en una nueva <tbody> si no existe uno.

Así que, sí tu código de ejemplo es aceptable y funciona bien con jQuery 1.4+. ;)

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

98voto

DaRKoN_ Puntos 4098

¿Qué pasa si tienes <tbody> y <tfoot>? asi como:

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

Entonces habría que insertar la nueva fila en el pie de página - no para el cuerpo.

Por lo tanto la mejor solución es incluir una etiqueta <tbody> y el uso .append, en lugar de .después.

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

26voto

Curtor Puntos 292

Recomiendo

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

como contraposición a

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

La first y last de las palabras clave en la primera o la última etiqueta que se inició, no se ha cerrado. Por lo tanto, este juega mejor con tablas anidadas, si usted no desea que la tabla anidada a ser cambiado, sino que añaden a la tabla global. Al menos, esto es lo que he encontrado.

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X