Adicionar linha da tabela em jQuery

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

Solução

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>');
Comentários (22)

E se você tivesse um e um?

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>");
Comentários (7)

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'));
Comentários (4)