Jaká je nejlepší metoda v jQuery pro přidání dalšího řádku do tabulky jako posledního řádku?
Je to přijatelné?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Existují nějaká omezení, co lze do takové tabulky přidat (například vstupy, výběry, počet řádků)?
Přístup, který navrhujete, vám nezaručí výsledek, který hledáte - co kdybyste měli například tělo
:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Výsledkem by bylo následující:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Proto bych doporučil tento postup:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Do metody after()
můžete zahrnout cokoli, pokud je to platné HTML, včetně více řádků podle výše uvedeného příkladu.
Aktualizace: Přehodnocení této odpovědi po nedávné aktivitě s touto otázkou. eyelidlessness má dobrou poznámku, že v DOM bude vždy tbody
; to je pravda, ale pouze pokud existuje alespoň jeden řádek. Pokud nemáte žádné řádky, nebude tam žádné tbody
, pokud jste ho sami nezadali.
DaRKoN_ navrhuje přidávání do tbody
namísto přidávání obsahu za poslední tr
. Tím se problém s absencí řádků obejde, ale stále to není neprůstřelné, protože teoreticky můžete mít více prvků tbody
a řádek se přidá ke každému z nich.
Když to všechno zvážíme, nejsem si jistý, že existuje jediné jednořádkové řešení, které by zohlednilo všechny možné scénáře. Budete se muset ujistit, že kód jQuery odpovídá vašemu značení.
Myslím, že nejbezpečnějším řešením je pravděpodobně zajistit, aby vaše table
vždy obsahovala alespoň jedno tbody
ve vašem značení, i když nemá žádné řádky. Na základě toho můžete použít následující postup, který bude fungovat bez ohledu na počet řádků (a také zohlední více prvků tbody
):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Co kdybyste měli <tbody>
a <tfoot>
?
Jako např:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Pak by se nový řádek vložil do zápatí - ne do těla.
Proto je nejlepším řešením vložit značku <tbody>
a použít .append
, nikoli .after
.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Můžete použít tuto skvělou funkci jQuery add table row. Funguje skvěle s tabulkami, které mají <tbody>
a které nemají. Bere také v úvahu colspan posledního řádku tabulky.
Zde je příklad použití:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));