Adicionar linha da tabela em jQuery
https://stackoverflow.com/questions/171027
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Qual é o melhor método em 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 para o que você pode adicionar a uma tabela como esta (como entradas, seleções, número de linhas)?
Solução
A abordagem que você sugere não é garantida para dar o resultado que você está procurando - e se você tivesse um tbody por exemplo:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Você acabaria com o seguinte:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Você pode incluir qualquer coisa dentro do after() Método, desde que seja válido HTML, incluindo várias linhas conforme o exemplo acima.
Atualizar: Revisitando esta resposta após atividade recente com esta pergunta. a falta de pálpebra faz um bom comentário de que sempre haverá um tbody no dom; Isso é verdade, mas apenas se houver pelo menos uma linha. Se você não tem linhas, não haverá tbody A menos que você tenha especificado um você mesmo.
Darkon_ sugere Anexando ao tbody em vez 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 você poderia teoricamente ter múltiplo tbody elementos e a linha seria adicionada a cada um deles.
Pesando tudo, não tenho certeza de que exista uma solução única que seja responsável por cada cenário possível. Você precisará garantir que o code jQuery contenha com sua marcação.
Eu acho que a solução mais segura é provavelmente para garantir o seu table tbody na sua marcação, mesmo que não tenha linhas. Nesta base, você pode usar o seguinte, que funcionará, no entanto, as linhas que você tiver (e também é responsável por múltiplos tbody elementos):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Outras dicas
O JQuery tem uma instalação embutida para manipular elementos DOM em tempo real.
Você pode adicionar qualquer coisa à sua mesa assim:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
o $('<some-tag>') coisa no jQuery é um objeto de tag que pode ter vários attr atributos que podem ser definidos e obtidos, bem como text, que representa o texto entre a tag aqui: <tag>text</tag>.
Isso é um recuo bastante estranho, mas é mais fácil para você ver o que está acontecendo neste exemplo.
Então as coisas mudaram desde então @Luke Bennett respondeu a esta pergunta. Aqui está uma atualização.
jQuery desde a versão 1.4 (?) Detecta automaticamente se o elemento que você está tentando inserir (usando algum dos append(), prepend(), before(), ou after() métodos) é um <tr> e insere -o no primeiro <tbody> em sua mesa ou envolve -a em um novo <tbody> Se alguém não existir.
Então, 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>');
E se você tivesse um <tbody> e a <tfoot>?
Tal como:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Em seguida, ele inseriria sua nova linha no rodapé - não no corpo.
Portanto, a melhor solução é incluir um <tbody> tag e uso .append, ao invés de .after.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Eu sei que você pediu um método jQuery.Pesquisei muito e descobri que podemos fazer isso de uma maneira melhor do que usar JavaScript diretamente pela função a seguir.
tableObject.insertRow(index)
index é um número inteiro que especifica a posição da linha a ser inserida (começa em 0).O valor -1 também pode ser utilizado;o que resulta em que a nova linha será inserida na última posição.
Este parâmetro é obrigatório no Firefox e Ópera, mas é opcional no Internet Explorer, cromada e Safári.
Se este 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.
Funcionará para todas as estruturas aceitáveis de 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.
Eu recomendo
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
em oposição a
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
o first e last As palavras -chave funcionam na primeira ou na última etiqueta a ser iniciada, não fechada. Portanto, isso é melhor com as tabelas aninhadas, se você não deseja que a tabela aninhada seja alterada, mas adicione à tabela geral. Pelo menos, foi isso que eu encontrei.
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
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 está a demonstração Violino
Também posso recomendar uma pequena função para fazer mais alterações em 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ê usar meu compositor de string, você 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 demonstraçãoViolino
Isso pode ser feito facilmente usando a função "last ()" do jQuery.
$("#tableId").last().append("<tr><td>New row</td></tr>");
Estou usando dessa maneira quando não há nenhuma linha na tabela, assim como, cada linha é bastante complicada.
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
Para a melhor solução publicada 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 mesas com mesas 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>');
Eu estava tendo alguns problemas relacionados, tentando inserir uma linha de 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);
Acabei com uma solução muito desarrumada:
Crie a tabela como segue (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);
Eu resolvi dessa maneira.
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>Você pode usar este ótimo JQuery Adicionar linha de mesa função. Funciona muito bem com mesas que têm <tbody> E isso não. Também leva em consideração o Colspan da sua última linha de mesa.
Aqui está um exemplo de uso:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Minha solução:
//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);
A resposta de Neil é de longe o melhor.No entanto, as coisas ficam complicadas 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);
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
Eu achei isto Plugin Addrow Muito útil para gerenciar linhas de tabela. Embora, Luke's solução Seria o melhor ajuste se você precisar adicionar uma nova linha.
Aqui estão algum código de hack de hacketi. Eu queria manter um modelo de linha em um Html página. As linhas da tabela 0 ... n são renderizadas no horário da solicitação, e este exemplo possui uma linha codificada e uma linha de modelo simplificada. A tabela de modelo está oculta e a etiqueta de linha deve estar dentro de uma tabela válida ou os navegadores podem soltá -la do Dom árvore. Adicionar uma linha usa contador+1 identificador e o valor atual é mantido no atributo de dados. Garante que cada linha se torna única Url parâmetros.
Eu fiz testes no Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (com Symbian 3), Android Stock e Firefox Beta navegadores.
<table id="properties">
<tbody>
<tr>
<th>Name</th>
<th>Value</th>
<th> </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 jQuery; Eles merecem tudo. Programação JavaScript sem jQuery - eu nem quero pensar nesse pesadelo.
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Acho que 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');
});
});
});
Esta é minha solução
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Como eu também tenho uma linha de adição também ou em qualquer lugar específico, então acho que também deveria compartilhar isso:
Primeiro descubra o comprimento ou as linhas:
var r=$("#content_table").length;
E então use o código abaixo para adicionar sua linha:
$("#table_id").eq(r-1).after(row_html);
Para adicionar um bom exemplo sobre o tópico, aqui está funcionando a solução se você precisar adicionar uma linha na 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. Então, se você (ou o designer) precisar alterar, não é necessário editar o 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>
Você pode armazenar em cache a variável rodapé e reduzir o acesso ao DOM (Nota: pode ser melhor usar uma linha falsa em vez de rodapé).
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
Se você tem outra variável, pode acessar <td> tag como essa 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);
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
vai adicionar uma nova linha ao primeiro TBODY da mesa, sem depender de nenhum THEAD ou TFOOT presente. (Eu não encontrei informações de qual versão do jQuery .append() este comportamento está presente.)
Você pode tentar nesses 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 b A linha é inserida depois 1 2, Não após 3 4 no segundo exemplo. Se a mesa estivesse vazia, o jQuery cria TBODY Para uma nova linha.
Se você estiver usando o plug -in JQuery DATATABLE, 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 Datatables fnadddata API DATATABLES
De uma maneira simples:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
Se você quiser adicionar row antes de o <tr> primeiro filho.
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
Se você quiser adicionar row depois de <tr> Último filho.
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
