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
javascript
html
html-table
K ''
źródło
źródło
removeChild
przyjmuje tylko jeden element DOM.Odpowiedzi:
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)
źródło
document.getElementById('tbody').innerHTML = '';
spowoduje to usunięcie wszystkich wierszy:
$("#table_of_items tr").remove();
źródło
$("tbody#id tr").remove()
Bardzo surowe, ale to też działa:
var Table = document.getElementById("mytable"); Table.innerHTML = "";
źródło
<th>
zagnieżdżone w pliku<thead>
. Jest to prawdopodobnie najbardziej poprawny składniowo sposób tworzenia tabeli.var bodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
bodyRef.innerHTML = '';
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.
źródło
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!
źródło
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!
źródło
Jeśli możesz zadeklarować
ID
fortbody
, możesz po prostu uruchomić tę funkcję:var node = document.getElementById("tablebody"); while (node.hasChildNodes()) { node.removeChild(node.lastChild); }
źródło
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); }
źródło
to działałoby przy usuwaniu iteracji w tabeli HTML w natywnym
document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
źródło
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();
źródło
Jeśli nie chcesz usuwać
th
i 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); }
źródło
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ół:
Rezultatem będą wiersze nagłówka, jeśli to wszystko, od czego zacząłeś, wydajność jest znacznie szybsza niż w przypadku pętli.
źródło
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.
źródło
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.źródło
<th>
s jako elementy DOM, wyczyść innerHTML tabeli, a następnie dodaj<th>
do niej s ponownie.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); }
źródło
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
#tbodyId
lub.tbodyClass
.źródło
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 !!.
źródło
Po prostu wyczyść korpus stołu.
$("#tblbody").html("");
źródło
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.
źródło