[Javascript] Añadir una fila de tabla en jQuery


Answers

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')
            )
        )
    );

La cosa $('<some-tag>') en jQuery es un objeto de etiqueta que puede tener varios atributos attr 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.

Question

¿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)?




Esta es mi solución

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');



Puede usar esta gran función jQuery add table row . Funciona muy bien con tablas que tienen <tbody> y que no. También toma en consideración el colspan de la última fila de la tabla.

Aquí hay un ejemplo de uso:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));



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

Escribir con una función de JavaScript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';



    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);



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);



<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');



De una manera simple:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');



Encontré este complemento AddRow bastante útil para administrar las filas de la tabla. Sin embargo, la solution de Luke sería la mejor opción si solo necesitas agregar una nueva fila.




¿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 una etiqueta <tbody> y usar .append , en lugar de .after .

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



Lo resolví de esta manera, que creo que es el más legible :)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )



<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

Puede almacenar en caché la variable de pie de página y reducir el acceso a DOM (Nota: puede ser mejor utilizar una fila falsa en lugar de un pie de página).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")



Como también tengo un modo de agregar fila al final o en cualquier lugar específico, así que creo que también debería compartir esto:

Primero averigüe la longitud o las filas:

var r=$("#content_table").length;

y luego use el código debajo para agregar su fila:

$("#table_id").eq(r-1).after(row_html);



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

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



yo recomiendo

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

Opuesto a

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

La first y la last palabra 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>