Qual è il metodo migliore in jQuery per aggiungere un'ulteriore riga a una tabella come ultima riga?
È accettabile?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Ci sono limitazioni a ciò che si può aggiungere a una tabella come questa (come ingressi, selezioni, numero di righe)?
L'approccio che suggerisci non è garantito per darti il risultato che stai cercando - e se tu avessi un tbody
per esempio:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Ti ritroveresti con il seguente risultato:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Raccomando quindi questo approccio:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Puoi includere qualsiasi cosa all'interno del metodo after()
, purché sia HTML valido, comprese le righe multiple come nell'esempio precedente.
Aggiornamento: Rivisitazione di questa risposta a seguito della recente attività con questa domanda. eyelidlessness fa un buon commento che ci sarà sempre un tbody
nel DOM; questo è vero, ma solo se c'è almeno una riga. Se non ci sono righe, non ci sarà alcun tbody
a meno che tu non ne abbia specificato uno.
DaRKoN_ suggerisce di aggiungere al tbody
piuttosto che aggiungere contenuto dopo l'ultimo tr
. Questo aggira il problema di non avere righe, ma non è ancora a prova di bomba, poiché si potrebbero teoricamente avere più elementi tbody
e la riga verrebbe aggiunta a ciascuno di essi.
Pesando il tutto, non sono sicuro che ci sia una singola soluzione di una riga che tenga conto di ogni singolo scenario possibile. Dovrai assicurarti che il codice jQuery sia in linea con il tuo markup.
Penso che la soluzione più sicura sia probabilmente quella di assicurare che la tua table
includa sempre almeno un tbody
nel tuo markup, anche se non ha righe. Su questa base, puoi usare la seguente, che funzionerà indipendentemente dal numero di righe che hai (e tiene conto anche di più elementi tbody
):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
E se tu avessi un <tbody>
e un <tfoot>
?
Ad esempio:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Allora inserirebbe la tua nuova riga nel footer - non nel corpo.
Quindi la soluzione migliore è includere un tag <tbody>
e usare .append
, piuttosto che .after
.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Puoi usare questa grande funzione jQuery add table row. Funziona benissimo con le tabelle che hanno <tbody>
e che non lo fanno. Inoltre prende in considerazione il colspan della tua ultima riga della tabella.
Ecco un esempio di utilizzo:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));