Dodaj vrstico tabele v jQueryju

Pristop, ki ga predlagate, vam ne bo zagotovil želenega rezultata - kaj če bi imeli na primer telo:

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

Na koncu bi dobili naslednje:

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

Zato priporočam ta pristop:

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

V metodo after() lahko vključite karkoli, če je to veljaven HTML, vključno z več vrsticami, kot v zgornjem primeru.

Popravek: Ponovni pregled tega odgovora po nedavni dejavnosti v zvezi s tem vprašanjem. eyelidlessness ima dobro pripombo, da bo v DOM vedno tbody; to je res, vendar le, če obstaja vsaj ena vrstica. Če nimate nobene vrstice, ne bo nobenega tbodyja, razen če ste ga določili sami.

DaRKoN_ predlaga dodajanje v tbody namesto dodajanja vsebine za zadnjim tr. S tem se izognemo problemu, da nimamo vrstic, vendar še vedno ni neprebojno, saj bi teoretično lahko imeli več elementov tbody in vrstica bi se dodala vsakemu od njih.

Če vse skupaj pretehtamo, nisem prepričan, da obstaja rešitev z eno samo vrstico, ki bi upoštevala vse možne scenarije. Prepričati se morate, da je koda jQueryja usklajena z vašo oznako.

Mislim, da je najvarnejša rešitev, če zagotovite, da vaša tabela vedno vključuje vsaj eno telo v vaši oznaki, tudi če nima vrstic. Na podlagi tega lahko uporabite naslednjo rešitev, ki bo delovala ne glede na število vrstic (in bo upoštevala tudi več elementov tbody):

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

Kaj če bi imeli <tbody> in <tfoot>?

Na primer:

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

Potem bi vstavil vašo novo vrstico v nogo - ne v telo.

Zato je najboljša rešitev vključitev oznake <tbody> in uporaba .append namesto .after.

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

Uporabite lahko to odlično funkcijo jQuery add table row. Odlično deluje pri tabelah, ki imajo <tbody>, in tistih, ki nimajo <tbody>. Upošteva tudi colspan zadnje vrstice tabele.

Tukaj je primer uporabe:

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