Agregar fila de tabla en jQuery

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

¿Es esto aceptable?

$('#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)?

preguntado Oct 04 '08, 22:10

Gracias Ash. Yo también estoy aprendiendo jQuery y me resulta difícil descubrir 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. -

Para su información: evite el uso de múltiples anexos (ralentiza enormemente el rendimiento), en lugar de construir su cadena o usar JavaScript join, que es mucho más rápido. -

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 insertarlo después de la primera fila, de esta manera si obtiene datos de la respuesta ajax, se creará su tabla, recuerde clónelo fuera del bucle, luego úselo para modificar el contenido dentro del bucle. $ ("# mainTable tbody"). append (fila); la fila es la copia clonada modificada :) -

30 Respuestas

No se garantiza que el enfoque que sugiera le dé el resultado que está buscando. tbody por 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() siempre que sea HTML válido, incluidas varias filas como en el ejemplo anterior.

Actualizar: 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 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 haya especificado uno usted 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ía tener múltiples tbody elementos y la fila se agregaría a cada uno de ellos.

Sopesando todo, no estoy seguro de que haya una única solución de una 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 asegurarse de que table siempre incluye al menos uno tbody en 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 contabilizará múltiples tbody elementos):

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

contestado el 23 de mayo de 17 a las 15:05

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

Puedes agregar cualquier cosa a tu mesa como esta:

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

La $('<some-tag>') Lo que 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>.

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

respondido 01 mar '12, 02:03

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

contestado el 23 de mayo de 17 a las 15:05

¿Y si tuvieras un <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 tanto, la mejor solución es incluir un <tbody> etiquetar y usar .append, más bien que .after.

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

Respondido el 19 de enero de 16 a las 13:01

Sé que ha solicitado 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)

index es un número entero que especifica la posición de la fila a insertar (comienza en 0). También se puede utilizar el valor de -1; 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 todas las estructuras aceptables de tablas 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.

Respondido el 06 de enero de 21 a las 14:01

Recomiendo

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

en contraposición a

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

La first y last las palabras clave funcionan 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 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>

Respondido el 29 de Septiembre de 11 a las 09:09

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 realizar 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 cuerdas, 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 Violín

Respondido el 20 de junio de 20 a las 12:06

Si tienes múltiples tbody puede obtener múltiples inserciones - Mark Schultheiss

Sí, puedes :) Puedes probar $("SELECTOR").last() para limitar su colección de etiquetas - más sumo

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

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

Respondido el 26 de enero de 10 a las 20:01

Buena idea, pero creo que querría cambiar el selector a #tableId tr ya que ahora mismo obtendría la tabla para agregar la fila debajo de la tabla. - Darryl Hein

Estoy usando esta forma cuando no hay ninguna fila en la tabla, además, cada fila es bastante complicada.

style.css:

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

xxx.html

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

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

...

Respondido el 16 de diciembre de 10 a las 08:12

Gracias. Esta es una solución muy elegante. Me gusta cómo mantiene la plantilla dentro de la cuadrícula. Hace que el código sea mucho más simple y fácil de leer y mantener. Gracias de nuevo. - Rodney

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>

Respondido el 24 de enero de 19 a las 12:01

Ahora puedo agregar con éxito datos dinámicos en una nueva fila, pero después de usar este método, mi filtro personalizado no funciona. ¿Tiene alguna solución para eso? Gracias - Arjun

Creo que necesitas llamar a una función de actualización de algún tipo. Hade decirlo sin un ejemplo. - Anton vBR

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

respondido 12 nov., 15:05

Tenía algunos problemas relacionados al intentar 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);

Respondido el 26 de junio de 13 a las 18:06

Creo que esta debería ser una pregunta nueva, en lugar de una respuesta a una existente ... - Darryl Hein

Puedes usar este genial jQuery agregar fila de tabla función. Funciona muy bien con tablas que tienen <tbody> y eso 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'));

respondido 02 mar '09, 16:03

No veo que eso sea terriblemente útil. Todo lo que hace es agregar una fila de tabla vacía a una tabla. Por lo general, si no siempre, desea agregar una nueva fila de tabla con algunos datos en ella. - Darryl Hein

Pero eso es normalmente lo que quieres. Esta función le permite agregar una fila vacía a cualquiera de sus tablas, sin importar cuántas columnas y intervalos de fila tenga, lo que la convierte en una función UNIVERSAL. Puede continuar desde allí, por ejemplo, con $ ('. Tbl tr: last td'). ¡¡¡El objetivo es tener una función universal !!! - Uzbekjon

Si su función también agrega datos a sus nuevas filas, no podrá usarla la próxima vez en su próximo proyecto. ¡¿Cual es el punto?! Sin embargo, en mi opinión, no es necesario que lo compartas ... - Uzbekjon

Si propone la función que no es parte de un paquete común, coloque aquí el código completo de la función. Gracias. - Yevgeniy Afanasyev

Mi solución:

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

uso:

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

respondido 30 mar '13, 09:03

y que si no hay tbody en mesa..?? significa que puede haber una fila directamente dentro <table> elemento, incluso si no tiene ningún encabezado. - shashwat

Te recomiendo encarecidamente que tengas tu marcado con así que depende de los estándares HTML 5, si no, siempre puedes hacer $ (this) .append (' '); que solo agrega una fila en la tabla. - Ricky G

Creo que si va a hacer de esto una función, tal vez podría devolver un objeto jQuery para la nueva fila para que sea encadenable. - Caos

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

Respondido el 06 de diciembre de 15 a las 08:12

Si bien esta puede ser una respuesta, no es muy útil para un visitante más adelante ... Por favor, agregue alguna explicación alrededor de su respuesta. - Jayan

La respuesta de Neil es de lejos el 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);

contestado el 23 de mayo de 17 a las 15:05

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

Respondido el 19 de enero de 16 a las 23:01

Encontré este Complemento AddRow bastante útil para administrar filas de tablas. Aunque, Luke solución sería la mejor opción si solo necesita agregar una nueva fila.

contestado el 23 de mayo de 17 a las 15:05

Esta es mi solucion

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

Respondido 20 Jul 17, 05:07

Aquí hay un código de hackeo de hacketi. Quería mantener una plantilla de fila en un HTML página. Las filas de la 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 plantilla está oculta y la etiqueta de fila debe estar dentro de una tabla válida o los navegadores pueden eliminarla de la DOM árbol. Al agregar una fila, se usa el contador + 1 identificador, y el valor actual se mantiene en el atributo de datos. Garantiza que cada fila sea única Enlance parámetros.

He realizado pruebas en Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (con Symbian 3), stock 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 de jQuery; se lo merecen todo. Programación JavaScript sin jQuery: ni siquiera quiero pensar en esa pesadilla.

respondido 30 mar '13, 09:03

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

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

Respondido el 21 de diciembre de 13 a las 15:12

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

Respondido 17 Abr '15, 19:04

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

De esta manera espero que sea de ayuda

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

Respondido el 15 de Septiembre de 17 a las 14:09

Como también tengo una forma de agregar una fila al final o en cualquier lugar específico, 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 siguiente código para agregar su fila:

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

contestado el 20 de mayo de 13 a las 13:05

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 quinta 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>

Respondido 29 ago 13, 15:08

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

Respondido 17 Abr '15, 19:04

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

agregará una nueva fila a la primeras TBODY de la mesa, sin depender de ninguna THEAD or TFOOT regalo. (No encontré información de qué versión de jQuery .append() este comportamiento está presente.)

Puede 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 que ejemplo a b la fila se inserta después de 1 2, no después de 3 4 en el segundo ejemplo. Si la tabla estuviera vacía, jQuery crea TBODY para una nueva fila.

Respondido 19 Abr '12, 14:04

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

Consulte tablas de datos fnAddData API de tablas de datos

Respondido 02 Oct 13, 09:10

De forma sencilla:

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

Respondido el 16 de junio de 15 a las 15:06

¿Podría elaborar más su respuesta agregando un poco más de descripción sobre la solución que proporciona? - abarisone

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>

respondido 26 mar '19, 14:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.