Pievienot tabulas rindu jQuery

Kāda ir labākā jQuery metode, lai tabulai pievienotu papildu rindu kā pēdējo rindu?

Vai tas ir pieņemami?

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

Vai ir kādi ierobežojumi attiecībā uz to, ko var pievienot šādai tabulai (piemēram, ievadi, atlases, rindu skaits)?

Risinājums

Jūsu ieteiktā pieeja negarantē rezultātu, ko jūs meklējat, piemēram, ja jums būtu tbody:

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

Rezultāts būtu šāds:

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

Tāpēc es ieteiktu šo pieeju:

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

Metodē after() var iekļaut jebko, ja vien tas ir derīgs HTML, tostarp vairākas rindas, kā norādīts iepriekš minētajā piemērā.

Atjauninājums: Pārskatām šo atbildi, ņemot vērā neseno aktivitāti saistībā ar šo jautājumu. eyelidlessness ir labs komentārs, ka DOM vienmēr būs tbody; tā ir taisnība, bet tikai tad, ja ir vismaz viena rinda. Ja rindu nav, tad tbody nebūs, ja vien jūs pats to nebūsiet norādījis.

DaRKoN_ ierosina pievienot tbody, nevis pievienot saturu pēc pēdējās tr. Tas atrisina rindiņu neesamības problēmu, bet joprojām nav necaurlaidīgs, jo teorētiski var būt vairāki tbody elementi, un rinda tiks pievienota katram no tiem.

Apsverot visu, es neesmu pārliecināts, ka ir viens vienīgs vienas rindas risinājums, kas ņemtu vērā visus iespējamos scenārijus. Jums būs jāpārliecinās, ka jQuery kods atbilst jūsu marķējumam.

Manuprāt, visdrošākais risinājums, iespējams, ir nodrošināt, lai jūsu table vienmēr ietvertu vismaz vienu tbody, pat ja tajā nav rindu. Pamatojoties uz to, varat izmantot šādu formulējumu, kas darbosies neatkarīgi no tā, cik rindu jums ir (un ņems vērā arī vairākus tbody elementus):

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

Ko darīt, ja jums būtu <tbody> un <tfoot>?

Piemēram:

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

Tad tas ievietos jūsu jauno rindu pēdiņā, nevis korpusā.

Tāpēc labākais risinājums ir iekļaut <tbody> tagu un izmantot .append, nevis .after.

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

Jūs varat izmantot šo lielisko jQuery pievienot tabulas rindu funkciju. Tā lieliski darbojas gan ar tabulām, kurām ir <tbody>, gan ar tabulām, kurām nav. Turklāt tā ņem vērā jūsu pēdējās tabulas rindas colspan.

Šeit ir lietošanas piemērs:

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