Adicionar linha da tabela no jQuery

2425

Qual é o melhor método no jQuery para adicionar uma linha adicional a uma tabela como a última linha?

Isso é aceitável?

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

Existem limitações no que você pode adicionar a uma tabela como esta (como entradas, seleções, número de linhas)?

Darryl Hein
fonte
2
Thxs Ash. Eu também estou apenas aprendendo jQuery e tendo dificuldade em descobrir a melhor maneira, especialmente coisas simples. A razão pela qual eles são duas perguntas é porque eu postei uma e, quase uma hora depois, percebi que deveria ter colocado a outra e não achava que deveria mudar a primeira.
Darryl Hein
30
Devido a isso: google.com/search?q=jquery+add+table+row
Darryl Hein
17
FYI - Evite usar vários anexos (diminui tremendamente o desempenho), crie sua cadeia de caracteres ou use a junção JavaScript, que é muito mais rápida.
precisa saber é o seguinte
Caso a linha seja muito complexa, o que eu faço é manter a primeira linha oculta com a estrutura necessária, criar um clone e modificar o texto e inserir após a primeira linha, assim, se você buscar dados da resposta ajax, sua tabela será criada, lembre-se clone-o fora do loop e use-o para modificar o conteúdo dentro do loop. $ ("# mainTable tbody"). append (linha); linha é a cópia clone modificado :)
Aadam

Respostas:

2143

A abordagem sugerida não garante o resultado que você procura - e se você tivesse uma, tbodypor exemplo:

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

Você terminaria com o seguinte:

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

Portanto, eu recomendaria essa abordagem:

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

Você pode incluir qualquer coisa dentro do after()método, desde que seja HTML válido, incluindo várias linhas, conforme o exemplo acima.

Atualização: Revisitando esta resposta após atividades recentes com esta pergunta. eyelidlessness faz um bom comentário que sempre haverá um tbodyno DOM; isso é verdade, mas apenas se houver pelo menos uma linha. Se você não tiver linhas, não haverá, a tbodymenos que você tenha especificado uma.

DaRKoN_ sugere anexar ao tbodyinvés de adicionar conteúdo após o último tr. Isso contorna a questão de não ter linhas, mas ainda não é à prova de balas, pois teoricamente você poderia ter vários tbodyelementos e a linha seria adicionada a cada um deles.

Pesando tudo, não tenho certeza de que exista uma única solução de uma linha que responda a todos os cenários possíveis. Você precisará garantir que o código jQuery corresponda à sua marcação.

Acho que a solução mais segura é garantir que você tablesempre inclua pelo menos uma tbodyna sua marcação, mesmo que não tenha linhas. Nesta base, você pode usar o seguinte, que funcionará no entanto, muitas linhas que você possui (e também conta para vários tbodyelementos):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Luke Bennett
fonte
6
@ Rama, não, não vai. Precisa haver uma solução melhor.
22711 Brian Liang
40
Sempre haverá um tbody no DOM.
Eyelidlessness 05/10/09
4
um tbody vazio não valida seu html embora
2ni
40
Uma pequena melhoria na solução que seria boa seria otimizar os seletores. Você pode obter melhorias na velocidade com: em $('#myTable').find('tbody:last')vez de $('#myTable > tbody:last').
Erik Töyrä Silfverswärd
2
"ausência de pálpebra faz um bom comentário de que sempre haverá um tbody no DOM" - tentei isso sem um tbody e não funcionou - só funciona se houver um tbody.
precisa saber é o seguinte
771

O jQuery possui um recurso interno para manipular elementos DOM em tempo real.

Você pode adicionar qualquer coisa à sua tabela assim:

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

A $('<some-tag>')coisa em jQuery é um objeto tag que pode ter vários attratributos que podem ser definidos e obter, assim como text, o que representa o texto entre a tag aqui: <tag>text</tag>.

Este é um recuo bastante estranho, mas é mais fácil para você ver o que está acontecendo neste exemplo.

Neil
fonte
60
Para aqueles que estão tentando fazer isso, observe cuidadosamente os locais dos parênteses. O assentamento adequado é crucial.
quer
9
E as tags de fechamento? Eles não são necessários?
senfo
9
$ ("# TableClassname") não deveria ser realmente $ ("# tableID"), pois o símbolo de hash se refere ao ID e não ao nome da classe?
Dave
7
Eu odeio esse encadeamento estranho. É um pesadelo manter o código cheio dessas coisas.
bancer
4
A adição do @senfo elementos filho os criará automaticamente.
Michel de Ruiter 16/09
308

Então, as coisas mudaram desde que @Luke Bennett respondeu a essa pergunta. Aqui está uma atualização.

jQuery desde a versão 1.4 (?) detecta automaticamente se o elemento que você está tentando inserir (usando qualquer um dos append(), prepend(), before(), ou after()métodos) é um <tr>e insere-o primeiro <tbody>em sua mesa ou quebra-lo em um novo <tbody>se ainda não existir.

Portanto, sim, seu código de exemplo é aceitável e funcionará bem com o jQuery 1.4+. ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Salman von Abbas
fonte
2
Tenha cuidado com essa suposição. Se a sua marcação anexada começar com \ n ou \ n \ r, o jQuery não detectará que é um <tr> e o anexará à <table> e não ao <tbody>. Acabei de encontrar isso com a marcação gerada por uma visualização MVC que tinha uma linha extra no início.
25716 Mik
@ Mik obrigado pelo aviso! Eu acho que yourString.trim()poderia remediar isso.
Salman von Abbas
Claro, mas você tem que pensar sobre isso. É melhor adotar o hábito de anexar ao <corpo> se você souber que existe um.
25716 Mik
O jQuery 3.1 ainda requer que um corpo seja especificado. Verifique aqui: jsfiddle.net/umaj5zz9/2
user984003
Isso faz com que minha página seja atualizada. Como posso evitar isso?
Avi
168

E se você tivesse um <tbody>e um <tfoot>?

Tal como:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Em seguida, ele inseria sua nova linha no rodapé - não no corpo.

Portanto, a melhor solução é incluir uma <tbody>tag e usar .append, em vez de .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");
ChadT
fonte
10
Você implementou seu tfoot incorretamente. Ele deve vir antes do corpo, não depois - consulte w3.org/TR/html4/struct/tables.html#h-11.2.3 . Portanto, minha solução ainda funciona, a menos que você decida quebrar os padrões (nesse caso, você também pode esperar que outras coisas dêem errado). Minha solução também funciona se você tem ou não um corpo, enquanto sua proposta falhará se um corpo não estiver presente.
22415 Luke Bennett
6
Apesar de qualquer erro no <tfoot />, esta é uma solução melhor. Se não houver <tbody />, você pode usar a mesma técnica na própria <table />. Enquanto a "resposta aceita" requer uma verificação adicional para ver se existe ou não uma linha. (Eu sei que o OP não especificou esta exigência, mas não importa -. Este post surge 1 em uma pesquisa no Google por esta técnica, ea melhor resposta não é o topo)
CleverPatrick
5
Esta é uma solução melhor do que encontrar. Em várias iterações, essa técnica parece sempre funcionar. Como um FYI adicionado, você pode usar .prepend para adicionar a linha ao início da tabela, enquanto .append coloca a linha no final da tabela.
Lance Cleveland
Isso é incorreto, irá adicionar linha para cada linha em tbody
garg10may
@ garg10may Você pode aconselhar como? Ele tem como alvo o tbody, não qualquer elemento filho.
ChadT
64

Eu sei que você pediu um método jQuery. Procurei muito e descobri que podemos fazê-lo de uma maneira melhor do que usar JavaScript diretamente pela seguinte função.

tableObject.insertRow(index)

indexé um número inteiro que especifica a posição da linha a ser inserida (começa em 0). O valor de -1 também pode ser usado; o que resulta em que a nova linha será inserida na última posição.

Este parâmetro é necessário no Firefox e Opera , mas é opcional no Internet Explorer, Chrome e Safari .

Se esse parâmetro for omitido, insertRow()insere uma nova linha na última posição no Internet Explorer e na primeira posição no Chrome e Safari.

Ele funcionará para todas as estruturas aceitáveis ​​da tabela HTML.

O exemplo a seguir irá inserir uma linha no último (-1 é usado 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 ajude.

shashwat
fonte
2
o problema com esse método (como acabei de descobrir) é que, se você tiver um rodapé, ele será adicionado APÓS o rodapé com o -1 como índice.
Kdubs
35

Eu recomendo

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

em oposição a

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

As palavras first- lastchave e funcionam na primeira ou na última tag a ser iniciada, e não fechadas. Portanto, isso funciona melhor com tabelas aninhadas, se você não quiser que a tabela aninhada seja alterada, mas adicione-a à tabela geral. Pelo menos, foi o que eu encontrei.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>
Curtor
fonte
32

Na minha opinião, a maneira mais rápida e clara é

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

aqui é demo Fiddle

Também posso recomendar uma pequena função para fazer mais alterações de 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] : '';
        });
    }
}());

Se você usa meu compositor de cordas, pode fazer isso 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'
}));

Aqui está a demo Fiddle

mais abafado
fonte
Se você tem múltiplos tbodyvocê pode obter várias inserções
Mark Schultheiss
Sim, você pode :) Você pode tentar $("SELECTOR").last()limitar a sua colecção de tag
sulest
23

Isso pode ser feito facilmente usando a função "last ()" do jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");
Nischal
fonte
9
Boa ideia, mas acho que você deseja alterar o seletor para #tableId tr, pois agora você obteria a tabela e adicionaria a linha abaixo da tabela.
Darryl Hein
17

Estou usando dessa maneira quando não há nenhuma linha na tabela e cada linha é bastante complicada.

style.css:

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

xxx.html

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

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

...
Dominic
fonte
Obrigado. Esta é uma solução muito elegante. Eu gosto de como ele mantém o modelo dentro da grade. Isso torna o código muito mais simples e fácil de ler e manter. Obrigado novamente.
Rodney
14

Para a melhor solução postada aqui, se houver uma tabela aninhada na última linha, a nova linha será adicionada à tabela aninhada em vez da tabela principal. Uma solução rápida (considerando tabelas com / sem tbody e tabelas com tabelas aninhadas):

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

Exemplo de uso:

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

Eu resolvi assim.

Usando jquery

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

Snippet

$('#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
fonte
? Posso adicionar com êxito dados dinâmicos em uma nova linha agora, mas depois de usar este método, o meu filtro personalizado não está funcionando ..Do você tem qualquer solução para esse T Hank você
Arjun
Eu acho que você precisa chamar uma função de atualização de algum tipo. Hade para contar sem um exemplo.
Anton vBR 25/01/19
13

Eu estava tendo alguns problemas relacionados, tentando inserir uma linha da tabela após a linha clicada. Tudo está bem, exceto que a chamada .after () não funciona para a última linha.

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

Eu cheguei com uma solução muito desarrumada:

crie a tabela da seguinte maneira (ID para cada linha):

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

etc ...

e depois :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
Avron Olshewsky
fonte
Eu acho que isso deve ser uma nova pergunta, em vez de uma resposta a um já existente ...
Darryl Hein
11

Você pode usar esta excelente função jQuery add table row . Funciona muito bem com tabelas que possuem <tbody>e que não. Também leva em consideração o colspan da sua última linha da tabela.

Aqui está um exemplo de uso:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Uzbekjon
fonte
Não vejo isso sendo muito útil. Tudo o que faz é adicionar uma linha de tabela vazia a uma tabela. Normalmente, se não sempre, você deseja adicionar uma nova linha da tabela com alguns dados.
Darryl Hein
1
Mas isso é geralmente o que você deseja. Essa função permite adicionar uma linha vazia a qualquer uma das suas tabelas, independentemente de quantas colunas e extensões de linha você tenha, tornando-a função UNIVERSAL. Você pode continuar a partir daí, por exemplo, com $ ('. Tbl tr: last td'). A questão toda é ter uma função universal !!!
Uzbekjon 4/03/09
Se sua função também adicionar dados em suas novas linhas, você não poderá usá-lo na próxima vez em seu próximo projeto. Qual é o ponto?! É na minha opinião, porém, você não precisa compartilhá-lo ...
Uzbekjon
Se você propõe a função que não faz parte de um pacote comum, coloque aqui o código completo da função. Obrigado.
Yevgeniy Afanasyev
10

Minha solução:

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

uso:

$('#Table').addNewRow(id1);
Ricky G
fonte
e daí se não houver tbodyna tabela .. ?? significa que pode haver linha diretamente dentro do <table>elemento, mesmo que sem nenhum cabeçalho.
Shashwat
Eu recomendo que você faça sua marcação com <TBody>, de acordo com os padrões HTML 5; caso contrário, você sempre poderá fazer $ (this) .append ('<tr id = "' + rowId + '"> </ tr> '); que apenas acrescenta uma linha na tabela.
22712 Ricky G
Eu acho que se você quiser fazer disso uma função, talvez possa retornar um objeto jQuery para a nova linha, para que ela possa ser encadeada.
Chaos
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
fonte
Embora isso possa ser uma resposta, não é muito útil para um visitante mais tarde ... Adicione algumas explicações em torno de sua resposta.
Jayan
9

A resposta de Neil é de longe a melhor. No entanto, as coisas ficam confusas muito rápido. Minha sugestão seria usar variáveis ​​para armazenar elementos e anexá-los à hierarquia do 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
fonte
9
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Escreva com uma função javascript

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

Achei esse plugin AddRow bastante útil para gerenciar linhas de tabela. No entanto, a solução de Luke seria a melhor opção se você apenas adicionar uma nova linha.

Vitalii Fedorenko
fonte
7

Aqui estão alguns códigos de hackers. Eu queria manter um modelo de linha em uma página HTML . As linhas da tabela 0 ... n são renderizadas no momento da solicitação e este exemplo possui uma linha codificada e uma linha de modelo simplificada. A tabela de modelos está oculta e a tag de linha deve estar em uma tabela válida ou os navegadores podem removê-la da árvore DOM . A adição de uma linha usa o contador + 1 identificador e o valor atual é mantido no atributo de dados. Garante que cada linha obtenha parâmetros de URL exclusivos .

Executei testes no Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (com Symbian 3), estoque Android e navegadores beta do 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();
}

PS: Dou todos os créditos à equipe do jQuery; eles merecem tudo. Programação JavaScript sem jQuery - nem quero pensar nesse pesadelo.

Quem eu
fonte
7
<tr id="tablerow"></tr>

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

Eu acho que eu fiz no meu projeto, aqui 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
fonte
7

Esta é a minha solução

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

se você tiver outra variável, poderá acessar na <td>tag dessa tentativa.

Dessa forma, espero que seja ú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
fonte
6

Como eu também tenho uma maneira também adicionar linha, finalmente, ou em qualquer lugar específico, então eu acho que também devo compartilhar isso:

Primeiro descubra o comprimento ou linhas:

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

e use o código abaixo para adicionar sua linha:

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

Para adicionar um bom exemplo sobre o tópico, aqui está uma solução funcional, se você precisar adicionar uma linha em uma posição específica.

A linha extra é adicionada após a 5ª linha ou no final da tabela, se houver menos de 5 linhas.

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

Coloquei o conteúdo em um contêiner pronto (oculto) abaixo da tabela. Portanto, se você (ou o designer) precisar alterar, não será necessário editar o JS.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>
d.raev
fonte
6
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

Você pode armazenar em cache a variável de rodapé e reduzir o acesso ao DOM (Observação: talvez seja melhor usar uma linha falsa em vez do rodapé).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
Pavel Shkleinik
fonte
5
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

adicionará uma nova linha à primeira TBODY da tabela, sem depender de nenhuma THEADou de TFOOTpresente. (Não encontrei informações de qual versão do jQuery .append()esse comportamento está presente.)

Você pode tentar estes exemplos:

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

Em qual exemplo a a blinha é inserida depois 1 2, não depois 3 4no segundo exemplo. Se a tabela estiver vazia, o jQuery cria TBODYpara uma nova linha.

Alexey Pavlov
fonte
5

Se você estiver usando o plugin Datatable JQuery, poderá tentar.

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 API de dados datatables fnAddData

Praveena M
fonte
5

De uma maneira simples:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
vipul sorathiya
fonte
Você poderia elaborar mais sua resposta, adicionando um pouco mais de descrição sobre a solução que você fornece?
abarisone
4

Tente isto: maneira muito simples

$('<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
fonte