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
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)
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, 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!
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);
}
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).
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.
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);
}
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);
}
der untenstehende Code funktioniert hervorragend ..__ Er entfernt alle Zeilen außer der Headerzeile. Also dieser Code wirklich t
$("#Your_Table tr>td").remove();
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);
}
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.
dies würde das Löschen der Iteration in einer nativen HTML-Tabelle bewirken
document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
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 !!.
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);
}
Mit Ausnahme von Header
& Footer
verwenden Sie diesen Code, um die Body
der Tabelle zu entfernen.
$("#YourTableId tr").not(':first, :last').remove();
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.
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
.
Reinigen Sie einfach den Tischkörper.
$("#tblbody").html("");
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.