Löschen Sie alle Zeilen in einer HTML-Tabelle

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

Behalten Sie die <th>Reihe in a <thead>und die anderen Reihen in a bei <tbody>und ersetzen Sie die <tbody>durch eine neue, leere.

dh

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

Dadurch werden alle Zeilen entfernt:

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

Sehr grob, aber das funktioniert auch:

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

Dies ist eine alte Frage, aber ich hatte 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!

Zu beachtende Punkte : Achten Sie auf häufige Fehler :

Wenn Ihr Startindex 0 ist (oder ein Index von Anfang an), lautet der richtige Code:

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

ANMERKUNGEN

1. Das Argument für deleteRow ist festgelegt.
Dies ist erforderlich, da beim Löschen einer Zeile die Anzahl der Zeilen abnimmt.
dh; Wenn ich (rows.length - 1) erreiche oder sogar bevor diese Zeile bereits gelöscht ist, haben Sie einen Fehler / eine Ausnahme (oder eine stille).

2. Der rowCount wird vor dem Start der for-Schleife genommen, da sich beim Löschen die "table.rows.length" ständig ändert. Sie haben also wieder das Problem, dass nur ungerade oder gerade Zeilen gelöscht werden.

Hoffentlich hilft das.

Angenommen, Sie haben nur eine Tabelle, sodass Sie sie nur mit dem Typ referenzieren können. Wenn Sie die Header nicht löschen möchten:

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

Andernfalls:

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

ich hoffe es hilft!

Ich musste alle Zeilen außer der ersten und der von @strat veröffentlichten Lösung löschen, aber das führte zu einer nicht erfassten Ausnahme (Verweis auf Node in einem Kontext, in dem er nicht vorhanden ist). Folgendes hat bei mir funktioniert.

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

Wenn Sie ein IDfür deklarieren können, können tbodySie einfach diese Funktion ausführen:

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

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

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

Der unten stehende Code funktioniert hervorragend. Es werden alle Zeilen außer der Kopfzeile entfernt. Also dieser Code wirklich t

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

Zuweisen einer ID zum tbody-Tag. dh. 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 (Kopf- / Zeilen- / Fußzeile) gelöscht wird, legen Sie die ID auf Tabellenebene fest, d. H.

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

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

Wie wäre es damit:

Gehen Sie beim ersten Laden der Seite folgendermaßen vor:

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

Wenn Sie dann die Tabelle löschen möchten:

myTable.innerHTML=myTable.oldHTML;

Das Ergebnis sind Ihre Kopfzeilen, wenn das alles ist, mit dem Sie begonnen haben. Die Leistung ist dramatisch schneller als bei Schleifen.

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

EDIT: Wobei "thstring" offensichtlich das HTML für alle Zeilen von <th>s ist.

Dies funktioniert im IE, ohne dass eine Variable für die Tabelle deklariert werden muss, und löscht alle Zeilen:

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

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

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

Hoffe es funktioniert bei dir !!.

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 so benennen, wie Sie möchten, nicht unbedingt #tbodyIdoder .tbodyClass.

Räumen Sie einfach den Tischkörper ab.

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

const table = document.querySelector ('table'); table.innerHTML === ''? null: table.innerHTML = ''; Das obige Javascript hat bei mir gut funktioniert. Es prüft, ob die Tabelle Daten enthält, und löscht dann alles einschließlich des Headers.