Agregar fila de tabla en jQuery

2425

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

Darryl Hein
fuente
2
Thxs 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 colocado la otra y no pensé que debería cambiar la primera.
Darryl Hein
30
Debido a esto: google.com/search?q=jquery+add+table+row
Darryl Hein el
17
FYI: evite usar múltiples anexos (ralentiza enormemente el rendimiento), en lugar de construir su cadena o usar JavaScript, que es mucho más rápido.
Gerrit Brink
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 insertar 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 ciclo, luego úselo para modificar el contenido dentro del ciclo. $ ("# mainTable tbody"). append (fila); la fila es la copia clonada modificada :)
Aadam

Respuestas:

2143

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>');
Luke Bennett
fuente
66
@Rama, no, no lo hará. Tiene que haber una mejor solución.
Brian Liang
40
Siempre habrá un cuerpo en el DOM.
párpado
44
Sin embargo
cuerpo
40
Una mejora menor de la solución que de otro modo sería buena sería optimizar los selectores. Puede obtener mejoras de velocidad con: en $('#myTable').find('tbody:last')lugar de $('#myTable > tbody:last').
Erik Töyrä Silfverswärd
2
"la falta de párpados hace un buen comentario de que siempre habrá un cuerpo en el DOM". Simplemente intenté esto sin un cuerpo y no funcionó, solo funciona si hay un cuerpo.
BrainSlugs83
771

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.

Neil
fuente
6060
Para aquellos que intentan esto, tenga en cuenta cuidadosamente la ubicación de los paréntesis. La anidación adecuada es crucial.
Ryan Lundy el
99
¿Qué pasa con las etiquetas de cierre? ¿No son necesarios?
senfo
99
¿No debería $ ("# tableClassname") ser $ ("# tableID") ya que el símbolo hash se refiere a la ID y no al nombre de la clase?
Dave
77
Odio un encadenamiento tan extraño. Es una pesadilla mantener el código lleno de tales cosas.
bancer
44
@senfo al agregar elementos secundarios los creará automáticamente.
Michel de Ruiter
308

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>');
Salman von Abbas
fuente
2
Ten cuidado con esta suposición. Si su marcado adjunto comienza con \ n o \ n \ r, jQuery no detectará que es un <tr> y lo agregará a <table> y no a <tbody>. Acabo de encontrar esto con el marcado generado por una vista MVC que tenía una línea adicional al principio.
Mik
@ Mik gracias por el aviso! Supongo que yourString.trim()podría remediar esto.
Salman von Abbas el
Por supuesto, pero tienes que pensarlo. Mejor tome el hábito de agregar al <tbody> si sabe que hay uno.
Mik
jQuery 3.1 todavía requiere que se especifique un tbody. Compruébalo aquí: jsfiddle.net/umaj5zz9/2
user984003
Esto hace que mi página se actualice. ¿Cómo puedo evitar eso?
Avi
168

¿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>");
ChadT
fuente
10
Ha implementado su pie incorrectamente. Debería venir antes del cuerpo, no después: ver w3.org/TR/html4/struct/tables.html#h-11.2.3 . Por lo tanto, mi solución aún funciona a menos que elija romper los estándares (en cuyo caso también puede esperar que otras cosas salgan mal). Mi solución también funciona si tienes un tbody o no, mientras que tu propuesta fallará si un tbody no está presente.
Luke Bennett
66
A pesar de cualquier error en el <tfoot />, esta es una mejor solución. Si no hay <tbody />, puede usar la misma técnica en la <tabla />. Mientras que la "respuesta aceptada" requiere una verificación adicional para ver si existe o no una fila. (Sé que el OP no especificó este requisito, pero no importa: esta publicación aparece en primer lugar en una búsqueda de Google para esta técnica, y la mejor respuesta no es la principal.)
CleverPatrick el
55
Esta es una mejor solución que encontrar. En varias iteraciones, esta técnica parece funcionar siempre. Como un FYI agregado, puede usar .prepend para agregar la fila al comienzo de la tabla, mientras que .append coloca la fila al final de la tabla.
Lance Cleveland
Esto es incorrecto, añadirá fila para cada fila de tbody
garg10may
@ garg10may ¿Puedes aconsejar cómo? Está dirigido al cuerpo, no a ningún elemento hijo.
ChadT
64

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.

shashwat
fuente
2
El problema con este método (como acabo de descubrir) es que si tiene un pie de página, se agregará DESPUÉS del pie de página con el -1 como índice.
kdubs
35

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>
Curtor
fuente
32

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

más grande
fuente
Si tiene múltiples tbody, puede obtener múltiples inserciones
Mark Schultheiss
Sí se puede :) Usted puede tratar $("SELECTOR").last()de limitar su colección de etiqueta
sulest
23

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

$("#tableId").last().append("<tr><td>New row</td></tr>");
Nischal
fuente
99
Buena idea, pero creo que querría cambiar el selector a #tableId tr ya que ahora la tabla agregaría la fila debajo de la tabla.
Darryl Hein el
17

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

...
Dominic
fuente
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
14

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>');
Oshua
fuente
14

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>

Anton vBR
fuente
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 necesita llamar a una función de actualización de algún tipo. Hade decir sin un ejemplo.
Anton vBR el
13

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);
Avron Olshewsky
fuente
Creo que esta debería ser una nueva pregunta, en lugar de una respuesta a una existente ...
Darryl Hein
11

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'));
Uzbekjon
fuente
No puedo ver eso siendo 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.
Darryl Hein
1
Pero eso suele ser lo que quieres. Esta función le permite agregar una fila vacía a cualquiera de sus tablas, sin importar cuántas columnas y espacios de fila tenga, por lo que es una función UNIVERSAL. Puede continuar desde allí, por ejemplo, con $ ('. Tbl tr: last td'). ¡El punto es tener una función universal!
Uzbekjon
Si su función también agrega datos en sus nuevas filas, no podrá usarlos la próxima vez en su próximo proyecto. ¡¿Cual es el punto?! Es en mi opinión, sin embargo, no es necesario compartirlo ...
Uzbekjon
Si propone la función que no forma parte de un paquete común, coloque el código completo de la función aquí. Gracias.
Yevgeniy Afanasyev
10

Mi solución:

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

uso:

$('#Table').addNewRow(id1);
Ricky G
fuente
¿y qué si no hay tbodyen la mesa .. ?? significa que puede haber una fila directamente dentro del <table>elemento, incluso sin encabezado.
shashwat
Recomiendo encarecidamente que tenga su marcado con <TBody> para que cumpla con los estándares HTML 5, si no, siempre puede hacer $ (this) .append ('<tr id = "' + rowId + '"> </ tr> '); 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
10
    // 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);
Pankaj Garg
fuente
Si bien esto puede ser una respuesta, no es muy útil para un visitante más tarde ... Agregue alguna explicación sobre su respuesta.
Jayan
9

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);
GabrielOshiro
fuente
9
<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>';
Jakir Hossain
fuente
9

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.

Vitalii Fedorenko
fuente
7

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.

Quien
fuente
7
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Vivek S
fuente
7

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

Esta es mi solucion

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Daniel Ortegón
fuente
7

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);
MEAbid
fuente
6

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);
Jaid07
fuente
6

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>
d.raev
fuente
6
<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>")
Pavel Shkleinik
fuente
5
$('#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.

Alexey Pavlov
fuente
5

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

Praveena M
fuente
5

De una manera simple:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
vipul sorathiya
fuente
¿Podría por favor elaborar más su respuesta agregando un poco más de descripción sobre la solución que proporciona?
abarisone
4

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>

rajmobiapp
fuente