Tabel rij toevoegen in jQuery

De aanpak die u voorstelt zal niet gegarandeerd het resultaat opleveren dat u zoekt - wat als u bijvoorbeeld een tbody had:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Dan zou je met het volgende eindigen:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Ik zou daarom deze aanpak aanraden:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

Je kunt alles opnemen in de after() methode zolang het maar geldige HTML is, inclusief meerdere rijen zoals in het voorbeeld hierboven.

Update: Herziening van dit antwoord na recente activiteit met deze vraag. ooglidloosheid maakt een goede opmerking dat er altijd een tbody in de DOM zal zijn; dit is waar, maar alleen als er ten minste één rij is. Als je geen rijen hebt, zal er ook geen tbody zijn, tenzij je er zelf een hebt opgegeven.

DaRKoN_ suggereert toe te voegen aan de tbody in plaats van inhoud toe te voegen na de laatste tr. Dit omzeilt het probleem van geen rijen hebben, maar is nog steeds niet bulletproof omdat je theoretisch meerdere tbody elementen zou kunnen hebben en de rij zou worden toegevoegd aan elk van hen.

Alles afwegende, ik'ben niet zeker dat er een enkele one-line oplossing is die rekening houdt met elk mogelijk scenario. Je zult ervoor moeten zorgen dat de jQuery code overeenkomt met je opmaak.

Ik denk dat de veiligste oplossing is om ervoor te zorgen dat uw table altijd ten minste een tbody in uw markup bevat, zelfs als het geen rijen heeft. Op deze basis kun je het volgende gebruiken, dat werkt ongeacht het aantal rijen dat je hebt (en ook rekening houdt met meerdere tbody elementen):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Wat als je een <tbody> en een <tfoot> had?

Zoals:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Dan zou het uw nieuwe rij in de voettekst invoegen - niet in de body.

De beste oplossing is dus om een <tbody> tag op te nemen en .append te gebruiken, in plaats van .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Je kunt deze geweldige jQuery tabel rij toevoegen functie gebruiken. Het werkt geweldig met tabellen die <tbody> hebben en die niet'`. Ook houdt het rekening met de colspan van je laatste tabel rij.

Hier is een voorbeeld gebruik:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));