Pridėti lentelės eilutę jQuery

Koks yra geriausias jQuery metodas, norint į lentelę pridėti papildomą eilutę kaip paskutinę eilutę?

Ar tai priimtina?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Ar yra apribojimų, ką galima įtraukti į tokią lentelę (pvz., įvestys, pasirinkimai, eilučių skaičius)?

Sprendimas

Jūsų siūlomas metodas negarantuoja, kad gausite norimą rezultatą, pavyzdžiui, kas būtų, jei turėtumėte tbody:

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

Gautumėte tokį rezultatą:

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

Todėl rekomenduočiau rinktis šį metodą:

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

Į after() metodą galite įtraukti bet ką, jei tai yra galiojantis HTML, įskaitant kelias eilutes, kaip nurodyta pirmiau pateiktame pavyzdyje.

Atnaujinta: Peržiūrime šį atsakymą po pastarojo meto veiklos, susijusios su šiuo klausimu. eyelidlessness pateikia gerą pastabą, kad DOM visada bus tbody; tai tiesa, bet tik tuo atveju, jei yra bent viena eilutė. Jei eilučių nėra, nebus ir tbody, nebent jūs patys jį nurodėte.

DaRKoN_ siūlo pridėti prie tbody, o ne pridėti turinį po paskutinės tr. Taip išsprendžiama eilučių nebuvimo problema, tačiau tai vis tiek nėra neperšaunama, nes teoriškai galite turėti kelis tbody elementus ir eilutė bus pridėta prie kiekvieno iš jų.

Viską pasvėrus, nesu tikras, kad yra vienintelis vienos eilutės sprendimas, kuris atitiktų visus įmanomus scenarijus. Turėsite įsitikinti, kad jQuery kodas atitinka jūsų žymėjimą.

Manau, kad saugiausias sprendimas tikriausiai būtų užtikrinti, kad jūsų table visada apimtų bent vieną tbody, net jei ji neturi eilučių. Remdamiesi tuo, galite naudoti toliau nurodytą metodą, kuris veiks nepriklausomai nuo to, kiek eilučių turite (ir taip pat atsižvelgs į kelis tbody elementus):

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

Ką daryti, jei turėtumėte <tbody> ir <tfoot>?

pvz:

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

Tada nauja eilutė būtų įterpta į poraštę, o ne į pagrindinę eilutę.

Taigi geriausias sprendimas - įtraukti <tbody> žymą ir naudoti .append, o ne .after.

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

Galite naudoti šią puikią jQuery add table row funkciją. Ji puikiai veikia su lentelėmis, kurios turi <tbody> ir kurios neturi. Be to, ji atsižvelgia į paskutinės lentelės eilutės colspan.

Pateikiame naudojimo pavyzdį:

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