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

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

No se garantiza que el enfoque que sugiera le brinde el resultado que está buscando, ¿qué pasaría si tuviera un tbodypor ejemplo:

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

Terminarías 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.

Actualización: Revisando esta respuesta después de la actividad reciente con esta pregunta. la falta de párpados hace un buen comentario de que siempre habrá un tbodyen el DOM; Esto es cierto, pero solo si hay al menos una fila. Si no tiene filas, no las habrá a tbodymenos que haya especificado una usted mismo.

DaRKoN_ sugiere anexar a la tbodyvez de añadir contenido después de la última tr. Esto evita el problema de no tener filas, pero todavía no es a prueba de balas, ya que teóricamente podría tener múltiples tbodyelementos y la fila se agregaría a cada uno de ellos.

Pesando todo, no estoy seguro de que haya una única solución de una línea que tenga en cuenta cada escenario posible. Deberá asegurarse de que el código jQuery coincida con su marcado.

Creo que la solución más segura es probablemente asegurarse de que tablesiempre incluya al menos uno tbodyen su marcado, incluso si no tiene filas. Sobre esta base, puede usar lo siguiente, que funcionará sin importar cuántas filas tenga (y también tenga en cuenta varios tbodyelementos):

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

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

Puede agregar cualquier cosa a su tabla de esta manera:

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

La $('<some-tag>')cosa en jQuery es un objeto de etiqueta que puede tener varios attratributos que se pueden establecer y obtener, así como text, lo que 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á sucediendo en este ejemplo.

Así que las cosas han cambiado desde que @Luke Bennett respondió a 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 una <tr>y lo inserta en la primera <tbody>en su mesa o lo envuelve en una nueva <tbody>si uno no lo hace 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>');

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

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

Sé que has pedido un método jQuery. Miré mucho y descubrí que podemos hacerlo de una mejor manera que usando JavaScript directamente mediante 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; lo que da como resultado que la nueva fila se inserte en la última posición.

Este parámetro es obligatorio en Firefox y Opera , pero es opcional en Internet Explorer, Chrome 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 la tabla HTML.

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

yo recomiendo

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

Opuesto a

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

Las palabras clave firsty lastfuncionan en la primera o la última etiqueta que se inicia, no se cierra. Por lo tanto, esto funciona mejor con las tablas anidadas, si no desea que se cambie 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>

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 de Fiddle

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 usa mi compositor de cadenas, puede 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 demostración de Fiddle

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

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

Lo uso 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() );

...

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

Lo resolví de esta manera.

Usando jquery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

Retazo

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>

Estaba teniendo algunos problemas relacionados, tratando de insertar una fila de la tabla después de la fila en la que se hizo clic. 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:

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

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

Aquí hay un ejemplo de uso:

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

Mi solución:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

uso:

$('#Table').addNewRow(id1);

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

La respuesta de Neil es, con mucho, la mejor. Sin embargo, las cosas se complican muy rápido. Mi sugerencia sería usar variables para almacenar elementos y agregarlos a la jerarquía DOM.

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

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

Escribir con una función javascript

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

Este complemento AddRow me pareció bastante útil para administrar filas de tablas. Sin embargo, la solución de Luke sería la mejor opción si solo necesita agregar una nueva fila.

Aquí hay un código de pirateo hacketi. Quería mantener una plantilla de fila en una página HTML . Las filas de tabla 0 ... n se representan en el momento de la solicitud, y este ejemplo tiene una fila codificada y una fila de plantilla simplificada. La tabla de plantillas está oculta y la etiqueta de la fila debe estar dentro de una tabla válida o los navegadores pueden soltarla del árbol DOM . Agregar una fila utiliza el contador + 1 identificador, y el valor actual se mantiene en el atributo de datos. Garantiza que cada fila obtenga parámetros de URL únicos .

He realizado pruebas en Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (con Symbian 3), acciones de Android y navegadores beta de Firefox.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PD: doy todos los créditos al equipo jQuery; Se lo merecen todo. Programación de JavaScript sin jQuery: ni siquiera quiero pensar en esa pesadilla.

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

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

Supongo que lo he hecho en mi proyecto, aquí está:

html

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

js

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});

Esta es mi solucion

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

si tiene otra variable a la que puede acceder en una <td>etiqueta como esa, intente.

De esta manera espero que sea útil

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);

Como también tengo una forma de agregar fila por fin o en cualquier lugar específico, creo que también debería compartir esto:

Primero descubra la longitud o las filas:

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

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

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

Para agregar un buen ejemplo sobre el tema, aquí hay una solución de trabajo si necesita agregar una fila en una posición específica.

La fila adicional se agrega después de la 5ta fila, o al final de la tabla si hay menos de 5 filas.

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

Puse el contenido en un contenedor listo (oculto) debajo de la tabla ... así que si usted (o el diseñador) tiene que cambiarlo, no es necesario editar el JS.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

<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 usar una fila falsa en lugar de pie de página).

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

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

agregará una nueva fila a la primera TBODY de la tabla, sin depender de ninguna THEADo TFOOTpresente. (No encontré información de qué versión de jQuery.append() está presente este comportamiento).

Puedes probarlo en estos ejemplos:

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

En qué ejemplo a bse inserta la fila después 1 2, no después 3 4en el segundo ejemplo. Si la tabla estuviera vacía, jQuery crea TBODYpara una nueva fila.

Si está utilizando el complemento Datatable JQuery, puede intentarlo.

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

Refer Datatables fnAddData Datatables API

De una manera simple:

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

Prueba esto: forma muy simple

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>