Hvad er den bedste metode i jQuery til at tilføje en ekstra række til en tabel som den sidste række?
Er dette acceptabelt?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Er der begrænsninger for, hvad du kan tilføje til en tabel som denne (f.eks. input, selects, antal rækker)?
Det er ikke sikkert, at den fremgangsmåde, du foreslår, giver det ønskede resultat - hvad nu hvis du f.eks. havde en tbody
:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Du ville ende med følgende:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Jeg vil derfor anbefale denne fremgangsmåde i stedet:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Du kan inkludere hvad som helst i after()
-metoden, så længe det er gyldig HTML, herunder flere rækker som i eksemplet ovenfor.
Opdatering: Revisiting dette svar efter nylig aktivitet med dette spørgsmål. eyelidlessness gør en god kommentar, at der altid vil være en tbody
i DOM; dette er sandt, men kun hvis der er mindst én række. Hvis du ikke har nogen rækker, vil der ikke være nogen tbody
, medmindre du selv har angivet en.
DaRKoN_ foreslår at tilføje til tbody
i stedet for at tilføje indhold efter den sidste tr
. Dette omgår problemet med ingen rækker, men er stadig ikke skudsikkert, da du teoretisk set kunne have flere tbody
-elementer, og rækken ville blive tilføjet til hvert af dem.
Når man vejer alt sammen, er jeg ikke sikker på, at der findes en enkelt løsning med én linje, der tager højde for alle mulige scenarier. Du skal sørge for, at jQuery-koden stemmer overens med din markup.
Jeg tror, at den sikreste løsning nok er at sikre, at din table
altid indeholder mindst én tbody
i din markup, selv om den ikke har nogen rækker. På dette grundlag kan du bruge følgende, som vil fungere uanset hvor mange rækker du har (og også tage højde for flere tbody
-elementer):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Hvad hvis du havde en <tbody>
og en <tfoot>
?
Som f.eks:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Så vil den indsætte din nye række i sidefoden - ikke i brødteksten.
Derfor er den bedste løsning at inkludere et <tbody>
tag og bruge .append
, snarere end .after
.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Du kan bruge denne fantastiske jQuery add table row funktion. Den fungerer godt med tabeller, der har <tbody>
og tabeller, der ikke har det. Den tager også hensyn til colspan for din sidste tabelrække.
Her er et eksempel på brug:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));