Pregunta Añadir una fila de tabla en jQuery


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

¿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 (como entradas, selecciones, número de filas)?


2050
2017-10-04 21:33


origen


Respuestas:


El enfoque que sugiere no le garantiza el resultado que está buscando, ¿y si tuviera una tbody por ejemplo:

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

Usted terminaría con lo siguiente:

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

Por lo tanto, recomendaría este enfoque en su lugar:

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

Puede incluir cualquier cosa dentro del after() método siempre que sea HTML válido, incluidas varias filas según el ejemplo anterior.

Actualizar: Revisando esta respuesta después de la actividad reciente con esta pregunta. párpado hace un buen comentario de que siempre habrá una tbody en el DOM; esto es cierto, pero solo si hay al menos una fila. Si no tiene filas, no habrá tbody a menos que hayas especificado uno tú mismo.

DaRKoN_ sugiere añadiendo a la tbody en lugar de agregar contenido después de la última tr. Esto evita el problema de no tener filas, pero aún así no es a prueba de balas ya que teóricamente podrías tener múltiples tbody los elementos y la fila se agregarían a cada uno de ellos.

Sopesando todo, no estoy seguro de que haya una sola solución de una sola línea que tenga en cuenta todos los escenarios posibles. Deberá asegurarse de que el código jQuery coincida con su marcado.

Creo que la solución más segura es, probablemente, para garantizar su table siempre incluye al menos uno tbody en su marcado, incluso si no tiene filas. Sobre esta base, puede usar lo siguiente que funcionará independientemente de las filas que tenga (y también cuenta para múltiples tbody elementos):

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

1863
2017-10-04 21:49



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

Puede agregar algo a su 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 text, que representa el texto entre la etiqueta aquí: <tag>text</tag>.

Este es un sangrado bastante extraño, pero es más fácil para ti ver lo que está sucediendo en este ejemplo.


697
2017-08-14 15:30



Entonces las cosas han cambiado desde entonces @Luke Bennett respondió esta pregunta. Aquí hay una actualización.

jQuery desde la versión 1.4 (?) detecta automáticamente si el elemento que está intentando insertar (utilizando cualquiera de los append(), prepend(), before(), o after() métodos) es un <tr> y lo inserta en el primer <tbody> en su mesa o lo envuelve en un nuevo <tbody> si uno no existe

Entonces sí, su código de ejemplo es aceptable y funcionará bien con jQuery 1.4+. ;)

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

274
2018-06-05 20:12



¿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> etiqueta y uso .append, más bien que .after.

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

147
2018-01-22 06:47



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

tableObject.insertRow(index)

indexes un número entero que especifica la posición de la fila para insertar (comienza en 0). El valor de -1 también se puede usar; que resulta en que la nueva fila se insertará en la última posición.

Este parámetro es obligatorio en Firefox y Ópera, pero 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 cada estructura aceptable de tabla HTML.

El siguiente ejemplo insertará una fila en la última (-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.


48
2018-04-20 17:38



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 la última etiqueta que se iniciará, no se cerrará. Por lo tanto, esto juega mejor con las tablas anidadas, si no desea que se modifique la tabla anidada, sino que se agrega 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>

31
2017-10-22 21:34



En mi opinión, la forma más rápida y clara es

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

aquí está la demostración Violín

También puedo recomendar una pequeña función para hacer más cambios html

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Si usas mi compositor de cuerdas puedes hacer esto como

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Aquí está la demo Violín


26
2018-06-30 12:40



Esto se puede hacer fácilmente usando la función "última ()" de jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

21
2018-01-26 13:34



Lo estoy usando de esta manera cuando no hay ninguna fila en la tabla, y cada fila es bastante complicada.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

16
2017-12-16 05:30



Estaba teniendo algunos problemas relacionados, tratando de insertar una fila de tabla después de la fila cliqueada. Todo está bien, excepto que la llamada .after () no funciona para la última fila.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

Aterricé con una solución muy desordenada:

crea la tabla de la siguiente manera (id para cada fila):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

etc ...

y entonces :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

13
2017-10-05 19:17



Para la mejor solución publicada aquí, si hay una tabla anidada en la última fila, la nueva fila se agregará a la tabla anidada en lugar de a la tabla principal. Una solución rápida (considerando tablas con / sin tbody y tablas con tablas anidadas):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

Ejemplo de uso:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

13
2018-01-21 22:21