Pytanie Dodaj wiersz tabeli w jQuery


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

Czy to jest do przyjęcia?

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

Czy istnieją ograniczenia dotyczące elementów, które można dodać do takiej tabeli (np. Dane wejściowe, zaznaczenia, liczba wierszy)?


2057
2017-10-04 21:33


pochodzenie


Thxs Ash. Ja również uczę się jQuery i trudno jest znaleźć najlepszy sposób, szczególnie proste rzeczy. Powodem, dla którego są to 2 pytania, jest to, że opublikowałem jedną, a potem prawie godzinę później zdałem sobie sprawę, że powinienem był umieścić drugą i nie sądziłem, że powinienem zmienić pierwszą. - Darryl Hein
Z tego powodu: google.com/search?q=jquery+add+table+row - Darryl Hein
FYI - Unikaj używania wielu załączników (bardzo spowalnia wydajność), raczej buduj ciąg znaków lub korzystaj z dołączania JavaScript, które jest znacznie szybsze. - Gerrit Brink
widzieć: stackoverflow.com/a/50365764/7186739 - Super Model
Na wszelki wypadek, jeśli wiersz jest zbyt skomplikowany, to co robię, to utrzymuj pierwszy wiersz ukryty pod wymaganą strukturą, twórz klony i modyfikuj tekst i wstawiaj po pierwszym wierszu, w ten sposób, jeśli pobierzesz dane z ajaxowej odpowiedzi, twój stół zostanie utworzony, pamiętaj sklonuj go poza pętlą, a następnie użyj go do zmodyfikowania zawartości w pętli. $ ("# mainTable tbody"). append (wiersz); row to zmodyfikowana kopia klonu :) - Aadam


Odpowiedzi:


Podejście, które sugerujesz, nie gwarantuje rezultatu, którego szukasz - a co jeśli miałeś tbody na przykład:

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

W efekcie otrzymasz:

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

W związku z tym zaleciłbym takie podejście:

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

Możesz dołączyć wszystko w obrębie after() metoda, pod warunkiem, że jest to poprawny kod HTML, w tym wiele wierszy, jak w powyższym przykładzie.

Aktualizacja: Wracając do tej odpowiedzi po niedawnej aktywności z tym pytaniem. bezmiękka czyni dobry komentarz, że zawsze będzie tbody w DOM; to prawda, ale tylko wtedy, gdy istnieje co najmniej jeden wiersz. Jeśli nie masz wierszy, nie będzie ich tbody chyba że sam je określiłeś.

DaRKoN_ wskazuje dołączając do tbody zamiast dodawać zawartość po ostatnim tr. Wiąże się to z brakiem wierszy, ale nadal nie jest kuloodporne, ponieważ teoretycznie można mieć wiele tbody elementy i wiersz zostaną dodane do każdego z nich.

Ważąc wszystko, nie jestem pewna, czy istnieje jedno jednoliniowe rozwiązanie, które uwzględnia każdy możliwy scenariusz. Musisz upewnić się, że kod jQuery jest zgodny z twoim znacznikiem.

Myślę, że najbezpieczniejszym rozwiązaniem jest zapewne zapewnienie sobie 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ły, jakkolwiek masz wiele wierszy (a także konta wielokrotnego) tbody elementy):

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

1872
2017-10-04 21:49



Czy to działa, jeśli w tabeli nie ma żadnych wierszy? - Rama Vadakattu
@Rama, nie, nie będzie. Musi być lepsze rozwiązanie. - Brian Liang
W DOM zawsze będzie tbody. - eyelidlessness
pusty tbody nie sprawdza jednak twojego html - 2ni
Niewielką poprawą w przeciwnym razie dobrym rozwiązaniem byłoby zoptymalizowanie selektorów. Możesz uzyskać poprawki prędkości dzięki: $('#myTable').find('tbody:last') zamiast $('#myTable > tbody:last'). - Erik Töyrä


jQuery ma wbudowaną możliwość manipulowania elementami DOM w locie.

Możesz dodać coś do swojej tabeli w ten sposób:

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

The $('<some-tag>') rzeczą w jQuery jest obiekt znacznika, który może mieć kilka attr atrybuty, które można ustawić i uzyskać, a także text, który reprezentuje tekst między tagiem tutaj: <tag>text</tag>.

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


699
2017-08-14 15:30



Dla tych, którzy próbują tego, zanotuj dokładnie lokalizacje nawiasów. Właściwe zagnieżdżanie jest kluczowe. - Ryan Lundy
A co z tagami zamykającymi? Czy nie są one konieczne? - senfo
Czy wartość $ ("# tableClassname") nie powinna wynosić $ ("# tableID"), ponieważ symbol skrótu odnosi się do identyfikatora, a nie do nazwy klasy? - Dave
jeśli chcę dodać więcej niż jeden <td>, gdzie powinien to zrobić? Dzięki! - sammiwei
Nienawidzę takich dziwnych połączeń. To koszmar, aby utrzymać kod pełen takich rzeczy. - bancer


Więc od tego czasu wszystko się zmieniło @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 z append(), prepend(), before(), lub after() metody) jest <tr> i wstawia go do pierwszego <tbody> w twoim stole lub owija go w nowy <tbody> jeśli ktoś 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>');

276
2018-06-05 20:12



Zachowaj ostrożność przy tym założeniu. Jeśli twój dołączony znacznik zaczyna się od \ n lub \ n \ r, jQuery nie wykryje, że jest <tr> i doda je do <table>, a nie do <tbody>. Właśnie napotkałem to ze znacznikami wygenerowanymi przez widok MVC, który miał dodatkowy wiersz na początku. - Mik
@Mik dzięki za heads up! zgaduję yourString.trim() mógł to naprawić. - Salman Abbas
Oczywiście, ale musisz o tym pomyśleć. Lepiej weź nawyk dołączania do <tbody>, jeśli wiesz, że istnieje. - Mik
jQuery 3.1 nadal wymaga podania tbody. Sprawdź to tutaj: jsfiddle.net/umaj5zz9/2 - user984003
Powoduje to odświeżenie mojej strony. Jak mogę temu zapobiec? - Avi


Co jeśli miałeś <tbody> i a <tfoot>?

Jak na przykład:

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

Wtedy wstawiłby twój nowy wiersz w stopce - nie w ciało.

Dlatego najlepszym rozwiązaniem jest włączenie <tbody> oznacz i używaj .appendraczej niż .after.

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

147
2018-01-22 06:47



Zaimplementowałeś tfoot niepoprawnie. Powinien pojawić się przed tobą, nie po - patrz w3.org/TR/html4/struct/tables.html#h-11.2.3. Dlatego moje rozwiązanie nadal działa, chyba że zdecydujesz się na złamanie standardów (w takim przypadku możesz oczekiwać, że inne rzeczy również pójdą źle). Moje rozwiązanie działa również bez względu na to, czy masz kogoś, czy nie, natomiast twoja propozycja nie powiedzie się, jeśli tbody nie jest obecny. - Luke Bennett
Pomimo wszelkich błędów w <tfoot />, jest to lepsze rozwiązanie. Jeśli nie ma <tbody />, możesz użyć tej samej techniki w samym <table />. Podczas gdy "zaakceptowana odpowiedź" wymaga dodatkowej kontroli, aby sprawdzić, czy istnieje istniejący wiersz. (Wiem, że OP nie określił tego wymogu, ale to nie ma znaczenia - ten wpis pojawia się na pierwszym miejscu w wyszukiwarce Google dla tej techniki, a najlepsza odpowiedź nie jest najlepsza). - Clever Human
To lepsze rozwiązanie niż znaleźć. W kilku powtórzeniach ta technika wydaje się działać zawsze. Jako dodatkową wartość FYI można użyć polecenia .prepend, aby dodać wiersz do początku tabeli, a przycisk .append wstawia wiersz na końcu tabeli. - Lance Cleveland
Jest to niepoprawne, spowoduje dodanie wiersza do każdego wiersza w tbody - garg10may
@ garg10may Czy możesz doradzić jak? Jest ukierunkowany na tbody, a nie na element potomny. - ChadT


Wiem, że poprosiłeś o metodę jQuery. Dużo się rozglądałem i stwierdziłem, że możemy to zrobić w lepszy sposób niż przy użyciu JavaScript bezpośrednio za pomocą poniższej funkcji.

tableObject.insertRow(index)

indexjest liczbą całkowitą, która określa pozycję wiersza do wstawienia (rozpoczyna się od 0). Można również użyć wartości -1; co powoduje, że nowy wiersz zostanie wstawiony na ostatniej pozycji.

Ten parametr jest wymagany w Firefoksie i Opera, ale jest opcjonalne w przeglądarce Internet Explorer, Chrom i Safari.

Jeśli ten parametr zostanie pominięty, insertRow() wstawia nowy wiersz na ostatniej pozycji w przeglądarce Internet Explorer i na pierwszej pozycji w przeglądarce Chrome i Safari.

Będzie działać dla każdej dopuszczalnej struktury tabeli HTML.

Poniższy przykład spowoduje wstawienie ostatniego wiersza (-1 służy jako indeks):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

Mam nadzieję, że to pomoże.


49
2018-04-20 17:38



Problem z tą metodą (jak się właśnie dowiedziałem) polega na tym, że jeśli masz stopkę, doda ona PO stopie z indeksem -1. - kdubs


polecam

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

w przeciwieństwie do

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

The first i last słowa kluczowe działają na pierwszym lub ostatnim tagu, który ma być uruchomiony, a nie zamknięty. Dlatego gra to ładniej z tabelami zagnieżdżonymi, jeśli nie chcesz, aby tabela zagnieżdżona została zmieniona, ale zamiast tego dodaj do ogólnej tabeli. Przynajmniej to znalazłem.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

31
2017-10-22 21:34





Moim zdaniem najszybszym i najbardziej przejrzystym sposobem jest

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

tutaj jest wersja demonstracyjna Skrzypce

Mogę również polecić małą funkcję, aby wprowadzić więcej zmian html

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Jeśli używasz mojego kompozytor, możesz to zrobić tak jak

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Oto wersja demonstracyjna Skrzypce


26
2018-06-30 12:40





Można to łatwo zrobić za pomocą funkcji "last ()" jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

22
2018-01-26 13:34



Dobry pomysł, ale myślę, że chciałbyś zmienić selektor na #tableId tr, ponieważ teraz masz tabelę dodawania wiersza pod tabelą. - Darryl Hein


Używam tego sposobu, gdy nie ma żadnego wiersza w tabeli, a także, że każdy wiersz jest dość skomplikowany.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

16
2017-12-16 05:30



Dziękuję Ci. To bardzo eleganckie rozwiązanie. Podoba mi się, jak utrzymuje szablon w siatce. Dzięki temu kod jest o wiele prostszy i łatwiejszy w czytaniu i utrzymaniu. Dzięki jeszcze raz. - Rodney


Miałem pewne powiązane problemy, próbując wstawić wiersz tabeli po klikniętym wierszu. Wszystko jest w porządku, z wyjątkiem, że wywołanie .after () nie działa dla ostatniego wiersza.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

Wylądowałem z bardzo niechlujnym rozwiązaniem:

utwórz tabelę w następujący sposób (id dla każdego wiersza):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

etc ...

i wtedy :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

13
2017-10-05 19:17



Brakujący kod HTML to <tr id = "row1"> </ tr> <tr id = "row2"> </ tr> ... - Avron Olshewsky
Myślę, że to powinno być nowe pytanie, zamiast odpowiedzi na już istniejące ... - Darryl Hein


Aby uzyskać najlepsze rozwiązanie tutaj zamieszczone, jeśli w ostatnim wierszu znajduje się tabela zagnieżdżona, nowy wiersz zostanie dodany do tabeli zagnieżdżonej zamiast do tabeli głównej. Szybkie rozwiązanie (biorąc pod uwagę tabele z / bez tbody i tabel z zagnieżdżonymi tabelami):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

Przykład użycia:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

13
2018-01-21 22:21