Dodaj wiersz tabeli w jQuery

Question

Dodaj wiersz tabeli w jQuery

Jaka jest najlepsza metoda w jQuery, aby dodać dodatkowy wiersz do tabeli jako ostatni wiersz?

Czy to jest dopuszczalne?

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

Czy istnieją ograniczenia co do tego, co można dodać do takiej tabeli (takie jak wejścia, selekcje, liczba wierszy)?

2109

javascript jquery html-table

Author: Mark Amery, 0000-00-00

Source

3 answers

JQuery ma wbudowany mechanizm do manipulowania elementami DOM w locie.

Możesz dodać cokolwiek do swojej tabeli w następujący sposób:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

Rzecz $('<some-tag>') w jQuery jest obiektem znacznika, który może mieć kilka atrybutów attr, które można ustawić i uzyskać, jak również text, który reprezentuje tekst pomiędzy znacznikiem tutaj: <tag>text</tag>.

jest to dość dziwne wcięcia, ale łatwiej jest Ci zobaczyć, co dzieje się w tym przykładzie.

709

Author: Neil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-29 22:36:49

Więc rzeczy się zmieniły odkąd @Luke Bennett odpowiedział na to pytanie. Oto aktualizacja.

JQuery od wersji 1.4 (?) automatycznie wykrywa, czy element, który próbujesz wstawić (używając dowolnego append(), prepend(), before(), lub after() metody) jest {[5] } i wstawia ją do pierwszej <tbody> w tabeli lub zawija ją do nowej <tbody>, jeśli taka nie istnieje.

Więc tak, twój przykładowy kod jest akceptowalny i będzie działał dobrze z jQuery 1.4+. ;)

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

281

Author: Salman Abbas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:38

score 1910 · Accepted Answer

Zaproponowane przez Ciebie podejście nie gwarantuje Ci rezultatu, którego szukasz - co by było, gdybyś miał tbody na przykład:

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

Skończysz z następującym:

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

Zalecałbym więc takie podejście zamiast:

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

Możesz dołączyć wszystko w metodzie after() tak długo, jak jest to poprawny HTML, w tym wiele wierszy, jak na powyższym przykładzie.

Update: Revisiting this answer after recent activity with this pytanie. brak powiek to dobry komentarz, że zawsze będzie tbody w DOM; to prawda, ale tylko wtedy, gdy jest co najmniej jeden wiersz. Jeśli nie masz wierszy, nie będzie tbody, chyba że sam je określiłeś.

DaRKoN_sugeruje dodanie do tbody zamiast dodawania treści po ostatnim tr. Jest to problem braku wierszy, ale nadal nie jest kuloodporny, ponieważ teoretycznie można mieć wiele tbody elementów, a wiersz otrzymałby dodawane do każdego z nich.

Rozważając wszystko, nie jestem pewien, czy istnieje jedno rozwiązanie jednoliniowe, które odpowiada każdemu możliwemu scenariuszowi. Musisz upewnić się, że kod jQuery jest dopasowany do Twoich znaczników.

Myślę, że najbezpieczniejszym rozwiązaniem jest upewnienie się, że twój table zawsze zawiera co najmniej jeden tbody w Twoim znaczniku, nawet jeśli nie ma wierszy. Na tej podstawie możesz użyć następujących, które będą działać bez względu na to, ile wierszy masz (a także konto dla wielu tbody pierwiastki):

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