Qual é o melhor método em jQuery para adicionar uma linha adicional a uma tabela como a última linha?
Isto é aceitável?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Há limitações ao que você pode acrescentar a uma tabela como esta (como entradas, seleções, número de filas)?
A abordagem que você sugere não é garantia de lhe dar o resultado que você está procurando - e se você tivesse um "corpo", 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>
Eu recomendaria, portanto, esta abordagem:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Você pode incluir qualquer coisa dentro do método after()
desde que seja HTML válido, incluindo várias linhas, conforme o exemplo acima.
Update: Revisitando esta resposta após atividade recente com esta pergunta. eyelidleslessness faz um bom comentário de que sempre haverá um tbody
no DOM; isto é verdade, mas somente se houver pelo menos uma fila. Se você não tiver nenhuma fila, não haverá corpo
a menos que você mesmo tenha especificado um.
DaRKoN_ sugere anexando ao tbody
ao invés de adicionar conteúdo após o último tr
. Isto contorna a questão de não ter linhas, mas ainda não é à prova de bala, pois teoricamente você poderia ter múltiplos elementos de tbody
e a linha seria adicionada a cada um deles.
Pesando tudo, não tenho a certeza se existe uma única solução de uma linha que responda a cada cenário possível. Você precisará ter certeza de que o código jQuery está de acordo com a sua marcação.
Penso que a solução mais segura é provavelmente garantir que a sua "mesa" inclua sempre pelo menos um "corpo" na sua marcação, mesmo que não tenha filas. Nesta base, você pode utilizar o seguinte, que funcionará independentemente do número de linhas que você tiver (e também conta com múltiplos elementos de tbody
):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
E se você tivesse um <corpo>
e um <pés>
?
Como por exemplo:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Depois inseriria a sua nova linha no rodapé - não no corpo.
Portanto, a melhor solução é incluir uma tag <tbody>
e utilizar .append
, em vez de `.after'.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Você pode usar esta grande função jQuery add table row. Funciona muito bem com tabelas que têm <tbody>
e que não têm. Também leva em consideração o colspan da sua última linha de tabela.
Aqui está um exemplo de uso:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));