wake-up-neo.com

Löschen Sie alle Zeilen in einer HTML-Tabelle

Wie kann ich alle Zeilen einer HTML-Tabelle mit Ausnahme von <th> mit Javascript löschen, ohne alle Zeilen in der Tabelle durchlaufen zu müssen? Ich habe eine sehr große Tabelle und möchte die Benutzeroberfläche nicht einfrieren, während ich die Zeilen durchsehe, um sie zu löschen

74
K''

Behalten Sie die <th>-Zeile in einem <thead> und die anderen Zeilen in einem <tbody>, und ersetzen Sie den <tbody> durch einen neuen, leeren.

d.h.

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
68
Quentin

dadurch werden alle Zeilen entfernt:

$("#table_of_items tr").remove(); 
68
Apparao

Sehr grob, aber das funktioniert auch:

var Table = document.getElementById("mytable");
Table.innerHTML = "";
45
Marcel

Dies ist eine alte Frage, jedoch hatte ich kürzlich ein ähnliches Problem.
Ich habe diesen Code geschrieben, um ihn zu lösen:

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]);
}

Dadurch werden alle Zeilen außer der ersten entfernt. 

Prost!

15
cstrat

Zu den häufigen Fehlern:

Wenn Sie möchten, dass der Index den Index von 0 (oder einen Index von Anfang an) startet,

dann ist die richtige Lösung:

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);
}

1. Das Argument für deleteRow ist behoben

dies ist erforderlich, da beim Löschen einer Zeile die Anzahl der Zeilen abnimmt. 
Wenn die Zeit erreicht ist, die erreicht wird (Zeilen.Länge - 1), oder sogar bevor diese Zeile bereits gelöscht ist, haben Sie einen Fehler/eine Ausnahme (oder einen stillen).

2. Der rowCount wird vor dem Start der for-Schleife verwendet

da sich die "table.rows.length" beim Löschen immer weiter ändert, haben Sie wieder ein Problem, dass nur ungerade oder gerade Zeilen nur gelöscht werden. 

Achten Sie auf diese, sparen Sie Zeit, viel Glück.

12

Angenommen, Sie haben nur eine Tabelle, so dass Sie nur mit dem Typ ..__ darauf verweisen können. Wenn Sie die Kopfzeilen nicht löschen möchten:

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

andernfalls:

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

ich hoffe es hilft!

Wenn Sie eine ID für tbody deklarieren können, können Sie einfach diese Funktion ausführen:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}
6
OSB

Ich musste alle Zeilen mit Ausnahme der ersten und der von @strat geposteten Lösung löschen, was jedoch zu einer nicht erfassten Ausnahme führte (Verweis auf Node in Kontext, in dem sie nicht vorhanden ist). Folgendes hat für mich gearbeitet. 

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

der untenstehende Code funktioniert hervorragend ..__ Er entfernt alle Zeilen außer der Headerzeile. Also dieser Code wirklich t 

$("#Your_Table tr>td").remove();
3
sid

Dies funktioniert in IE, ohne dass Sie sogar eine var für die Tabelle deklarieren müssen. Alle Zeilen werden gelöscht:

for(var i = 0; i < resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}
2
Lester Northe

Wenn Sie weit weniger <th>-Zeilen als nicht -<th>-Zeilen haben, können Sie alle <th>-Zeilen in einer Zeichenfolge sammeln, die gesamte Tabelle entfernen und dann <table>thstring</table> dort schreiben, wo sich die Tabelle befand.

BEARBEITEN: Hierbei ist "thstring" offensichtlich der HTML-Code für alle Zeilen von <th>s.

2
yoozer8

dies würde das Löschen der Iteration in einer nativen HTML-Tabelle bewirken

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
1
HuntsMan

dies ist ein einfacher Code, den ich gerade geschrieben habe, um dieses Problem zu lösen, ohne die Kopfzeile (die erste) zu entfernen.

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

Ich hoffe es funktioniert für Sie !!.

1
user3423649

Wenn Sie th nicht entfernen möchten und nur die Zeilen darin entfernen möchten, funktioniert dies einwandfrei.

var tb = document.getElementById('tableId');
  while(tb.rows.length > 1) {
  tb.deleteRow(1);
}
1
Suresh Atta

Mit Ausnahme von Header & Footer verwenden Sie diesen Code, um die Body der Tabelle zu entfernen.

$("#YourTableId tr").not(':first, :last').remove();
0
sebu

Wie wäre es damit:

Wenn die Seite zum ersten Mal geladen wird, führen Sie folgende Schritte aus:

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

Dann, wenn Sie die Tabelle löschen möchten:

myTable.innerHTML=myTable.oldHTML;

Das Ergebnis ist Ihre Kopfzeile (n). Wenn Sie damit nicht schon angefangen haben, ist die Leistung erheblich schneller als das Schleifen.

0
Len White

Weisen Sie Ihrem Körper eine ID oder eine Klasse zu. 

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

Sie können Ihre ID oder Klasse nach Ihren Wünschen benennen, nicht unbedingt #tbodyId oder .tbodyClass.

0
Andreea

Reinigen Sie einfach den Tischkörper.

$("#tblbody").html("");
0
siva

Zuweisen einer ID zum Tbody-Tag. d.h. Danach sollte die folgende Zeile die Kopf-/Fußzeile der Tabelle beibehalten und alle Zeilen entfernen.

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

Wenn Sie möchten, dass die gesamte Tabelle (Kopfzeile/Zeilen/Fußzeile) gelöscht wird, setzen Sie die ID auf Tabellenebene, d. H.

0