Usuń wszystkie wiersze w tabeli HTML

104

Jak mogę usunąć wszystkie wiersze tabeli HTML, z wyjątkiem tych <th>, które używają JavaScript i nie przechodzą przez wszystkie wiersze w tabeli? Mam bardzo dużą tabelę i nie chcę zamrozić interfejsu użytkownika podczas przeglądania wierszy w celu ich usunięcia

K ''
źródło
2
Musi być pętla, nie ma polecenia „usuń wiele elementów”, metoda removeChildprzyjmuje tylko jeden element DOM.
Šime Vidas
@SLaks zakładając, że miał na myśli wiersz zawierający wiersze nagłówka
Eonasdan

Odpowiedzi:

94

Zachowaj <th>wiersz w a, <thead>a pozostałe w a, <tbody>a następnie zamień<tbody> nowy, pusty.

to znaczy

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
Quentin
źródło
Najłatwiejsze rozwiązanie, oczywiście pod warunkiem, że programista JavaScript może modyfikować HTML.
Blazemonger
1
Uważaj, jeśli zamierzasz zamienić tbody za pomocą właściwości innerHTML, nie zadziała w IE, jest jednak obejście.
Aziz punjani
2
@Eonasdan - To trochę subiektywne. Istnieje wiele bibliotek (obecnie wolałbym używać YUI 3), gdyby ktoś z tym problemem chciał rozwiązać ten problem z jedną z nich. Zasady będą takie same bez względu na to, jaki ogromny fragment kodu strony trzeciej chcesz uwzględnić.
Quentin
3
Nekromancja tego ... co jest nie tak z: document.getElementById('tbody').innerHTML = '';
Trees4theForest
2
@ Trees4theForest To działa dobrze dla mnie. Prawdopodobnie nie było to możliwe w czasie OP.
Mabu
98

spowoduje to usunięcie wszystkich wierszy:

$("#table_of_items tr").remove(); 
Apparao
źródło
45
Jeśli nie chcesz usuwać nagłówka: $ ("# table_of_items tbody tr"). Remove ();
TTT
1
Bardzo dobra, prosta odpowiedź. Użyłem w moim CoffeeScript - lubię rozwiązania $("tbody#id tr").remove()
jednowierszowe
Myślę, że jest to lepsza odpowiedź niż zaakceptowana, choć zależy to od tego, czy chcesz używać JQuery, czy nie. Ale jakoś .remove nie działa na Chrome.
Milind Thakkar
TTT, użyj tagów <thead><th></th> </thead>, aby utworzyć nagłówek tabeli. Następnie $ ("# table_of_items tr"). Remove (); działa dobrze, ponieważ usuwa tylko tagi <tr>.
Kate
TTT, dodaj swój komentarz do odpowiedzi. Twoja odpowiedź jest idealna!
Khorshid
61

Bardzo surowe, ale to też działa:

var Table = document.getElementById("mytable");
Table.innerHTML = "";
Marcel
źródło
10
Niestety, nie powoduje to zachowania nagłówków <th>, o co prosi PO.
JoSeTe4ever
2
Dzieje się tak, jeśli umieszczą swoje nagłówki <th> zagnieżdżone w pliku <thead>. Jest to prawdopodobnie najbardziej poprawny składniowo sposób tworzenia tabeli.
Jon Black
Działa świetnie. Myślę, że jest to odpowiednie tylko dla ludzi takich jak ja, którzy stworzyli nagłówek tabeli, wiersz, komórkę, wszystko w JQuery.
Shamsul Arefin Sajib
To działało dobrze, gdy po prostu wyczyściłem kod HTML w tbody :)
RudyOnRails
Wyczyściłem tylko ciało z niewielką modyfikacją var bodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; bodyRef.innerHTML = '';
azyth,
22

Punkty, na które należy zwrócić uwagę, w sekcji Uważaj na typowe błędy :

Jeśli twój indeks początkowy to 0 (lub jakiś indeks od początku), to prawidłowy kod to:

var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
    table.deleteRow(tableHeaderRowCount);
}

UWAGI

1. argument dla deleteRow jest ustalony,
jest to wymagane, ponieważ gdy usuwamy wiersz, liczba wierszy maleje.
to znaczy; do czasu, gdy osiągnę (rows.length - 1) lub nawet zanim ten wiersz zostanie już usunięty, więc wystąpi jakiś błąd / wyjątek (lub cichy).

2. rowCount jest pobierane przed rozpoczęciem pętli for ponieważ gdy usuwamy „table.rows.length” będzie się zmieniać, więc znowu masz problem, że tylko nieparzyste lub parzyste wiersze są usuwane.

Mam nadzieję, że to pomoże.

Manohar Reddy Poreddy
źródło
17

To stare pytanie, ale ostatnio miałem podobny problem.
Napisałem ten kod, aby go rozwiązać:

var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var x=rowCount-1; x>0; x--) {
   elmtTable.removeChild(tableRows[x]);
}

Spowoduje to usunięcie wszystkich wierszy z wyjątkiem pierwszego.

Twoje zdrowie!

cstrat
źródło
10
krótszy (i szybszy): var rowCount = myTable.rows.length; while (- rowCount) myTable.deleteRow (rowCount);
Petar
Kod w powyższym komentarzu nie usuwa pierwszego wiersza
PrfctByDsgn
10

Zakładając, że masz tylko jedną tabelę, więc możesz odwoływać się do niej tylko z typem. Jeśli nie chcesz usuwać nagłówków:

$("tbody").children().remove()

Inaczej:

$("table").children().remove()

mam nadzieję, że to pomoże!

Francisco López-Sancho
źródło
8

Jeśli możesz zadeklarować IDfor tbody, możesz po prostu uruchomić tę funkcję:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}
OSB
źródło
7

Musiałem usunąć wszystkie wiersze z wyjątkiem pierwszego i rozwiązania opublikowanego przez @strat, ale spowodowało to nieprzechwycony wyjątek (odwoływanie się do Node w kontekście, w którym nie istnieje). Poniższe zadziałały dla mnie.

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
   myTable.deleteRow(x);
}
lkan
źródło
5

to działałoby przy usuwaniu iteracji w tabeli HTML w natywnym

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
Myśliwy
źródło
5

Podany poniżej kod działa świetnie. Usuwa wszystkie wiersze z wyjątkiem wiersza nagłówka. Więc ten kod naprawdę t

$("#Your_Table tr>td").remove();
sid
źródło
3
czekaj, to jest odpowiedź jQuery, oryginalne pytanie nie dotyczyło konkretnie rozwiązania jQuery!
objawił się
3

Jeśli nie chcesz usuwać thi po prostu chcesz usunąć rzędy w środku, działa to idealnie.

var tb = document.getElementById('tableId');
  while(tb.rows.length > 1) {
  tb.deleteRow(1);
}
Suresh Atta
źródło
3

Co powiesz na to:

Po pierwszym załadowaniu strony wykonaj następujące czynności:

var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;

Następnie, gdy chcesz wyczyścić stół:

myTable.innerHTML=myTable.oldHTML;

Rezultatem będą wiersze nagłówka, jeśli to wszystko, od czego zacząłeś, wydajność jest znacznie szybsza niż w przypadku pętli.

Len White
źródło
bardzo eleganckie rozwiązanie
pojawiło się
3

Przypisywanie identyfikatora do tagu. tj. Następnie następny wiersz powinien zachować nagłówek / stopkę tabeli i usunąć wszystkie wiersze.

document.getElementById("yourID").innerHTML="";

A jeśli chcesz, aby cała tabela (nagłówek / wiersze / stopka) została wymazana, ustaw identyfikator na poziomie tabeli, tj.

Vinaykumar Patel
źródło
2

Jeśli masz znacznie mniej <th>wierszy niż nie- <th>wierszy, możesz zebrać wszystkie <th>wiersze w łańcuch, usunąć całą tabelę, a następnie napisać, <table>thstring</table>gdzie kiedyś znajdowała się tabela.

EDYCJA: Gdzie, oczywiście, „thstring” to kod HTML dla wszystkich wierszy <th>s.

yoozer8
źródło
1
Zamiast tego zbierz <th>s jako elementy DOM, wyczyść innerHTML tabeli, a następnie dodaj <th>do niej s ponownie.
entonio
Uważaj, jeśli zamierzasz zamienić clear tbody za pomocą właściwości innerHTML, nie zadziała to w IE, jest jednak obejście.
aziz punjani
2

Działa to w IE bez konieczności deklarowania zmiennej dla tabeli i usunie wszystkie wiersze:

for(var i = 0; i < resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}
Lester Northe
źródło
2

Przypisz identyfikator lub klasę swojemu tobie.

document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();

Możesz nazwać swój identyfikator lub klasę, jak chcesz, niekoniecznie #tbodyIdlub .tbodyClass.

Andreea
źródło
1

to jest prosty kod, który właśnie napisałem, aby rozwiązać ten problem, bez usuwania wiersza nagłówka (pierwszego).

var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}

Mam nadzieję, że to działa dla Ciebie !!.

user3423649
źródło
0

Po prostu wyczyść korpus stołu.

$("#tblbody").html("");
śiwa
źródło
2
html () jest w rzeczywistości metodą jQuery.
carlodurso
-1

const table = document.querySelector ('table'); table.innerHTML === ''? null: table.innerHTML = ''; powyższy javascript działał dobrze dla mnie. Sprawdza, czy tabela zawiera jakiekolwiek dane, a następnie czyści wszystko, łącznie z nagłówkiem.

Papież Franciszek
źródło