Legg til tabellrad i jQuery

Tilnærmingen du foreslår er ikke garantert å gi deg det resultatet du er ute etter - hva om du for eksempel hadde en "t-kropp":

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

Du ville ende opp med følgende:

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

Jeg vil derfor anbefale denne tilnærmingen i stedet:

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

Du kan inkludere hva som helst innenfor after()-metoden så lenge det er gyldig HTML, inkludert flere rader som i eksemplet ovenfor.

Oppdatering: Reviderer dette svaret etter nylig aktivitet med dette spørsmålet. eyelidlessness gir en god kommentar om at det alltid vil være en tbody i DOM; dette er sant, men bare hvis det er minst en rad. Hvis du ikke har noen rader, vil det ikke være noen tbody med mindre du har spesifisert en selv.

DaRKoN_ foreslår å legge til tbody i stedet for å legge til innhold etter siste tr. Dette omgår problemet med å ikke ha noen rader, men er fortsatt ikke skuddsikkert, ettersom du teoretisk sett kan ha flere tbody -elementer, og raden vil bli lagt til hver av dem.

Når jeg veier alt opp, er jeg ikke sikker på at det er en enkelt en-linjers løsning som står for hvert eneste mulige scenario. Du må sørge for at jQuery-koden stemmer overens med markeringen din.

Jeg tror den sikreste løsningen er sannsynligvis å sikre at tabellen alltid inneholder minst en tbody i markeringen din, selv om den ikke har noen rader. På dette grunnlaget kan du bruke følgende som vil fungere uansett hvor mange rader du har (og også ta hensyn til flere tbody-elementer):

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

Hva om du hadde en "kropp" og en "fot"?

For eksempel:

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

Da vil den sette inn den nye raden i bunnteksten - ikke i brødteksten.

Derfor er den beste løsningen å inkludere en <tbody>-tag og bruke .append, i stedet for .after.

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

Du kan bruke denne flotte jQuery add table row-funksjonen. Det fungerer bra med tabeller som har '` og som ikke har det. Det tar også hensyn til colspan i den siste tabellraden din.

Her er et eksempel på bruk:

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