web-dev-qa-db-fra.com

Supprimer toutes les lignes d'un tableau HTML

Comment puis-je supprimer toutes les lignes d'un tableau HTML, à l'exception du <th>, avec Javascript et sans avoir à parcourir toutes les lignes du tableau? J'ai une très grande table et je ne veux pas geler l'interface utilisateur pendant que je parcours les lignes pour les supprimer.

javascripthtmlhtml-table
74
K''

Conservez la ligne <th> dans un <thead> et les autres lignes dans un <tbody> puis remplacez le <tbody> par un nouveau, vide.

c'est à dire.

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

cela supprimera toutes les lignes:

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

Très brut, mais cela fonctionne aussi:

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

C'est une vieille question, mais j'ai récemment eu un problème similaire.
J'ai écrit ce code pour le résoudre:

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

Cela supprimera toutes les lignes, sauf la première. 

À votre santé!

15
cstrat

Points à noter, sur les erreurs courantes:

Si vous aimez le code pour démarrer l’index à partir de 0 (ou un index à partir de begin),

alors, la solution correcte est:

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. l'argument pour deleteRow est corrigé

cela est nécessaire car lors de la suppression d'une ligne, le nombre de lignes diminue. 
c'est à dire; au moment où j'atteins (rows.length - 1), ou même avant que cette ligne soit déjà supprimée, vous aurez donc une erreur/exception (ou une silencieuse).

2. le rowCount est pris avant le début de la boucle for

comme nous supprimons "table.rows.length", les modifications continuent, de sorte que vous avez à nouveau un problème: seules les lignes impaires ou paires sont supprimées. 

Faites attention à ceux-ci, gagnez du temps, bonne chance.

12
Manohar Reddy Poreddy

En supposant que vous n’ayez qu’une table, vous pouvez la référencer avec seulement le type . Si vous ne voulez pas supprimer les en-têtes:

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

autrement:

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

j'espère que ça aide!

8
Francisco López-Sancho

Si vous pouvez déclarer une ID pour tbody, vous pouvez simplement exécuter cette fonction:

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

J'avais besoin de supprimer toutes les lignes à l'exception de la première et de la solution publiée par @strat, mais cela a entraîné une exception non interceptée (référençant le nœud dans un contexte où il n'existe pas). Ce qui suit a fonctionné pour moi. 

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

le code Give ci-dessous fonctionne très bien ... Il supprime toutes les lignes sauf la ligne d'en-tête. Donc ce code vraiment t 

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

Cela fonctionne dans IE sans même avoir à déclarer une var pour la table et supprimera toutes les lignes:

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

Si vous avez beaucoup moins de lignes <th> que de lignes non -<th>, vous pouvez collecter toutes les lignes <th> dans une chaîne, supprimer la table entière, puis écrire <table>thstring</table> là où elle se trouvait.

EDIT: Où, évidemment, "thstring" est le code HTML pour toutes les lignes de <th>s.

2
yoozer8

cela fonctionnerait la suppression d'itération dans un tableau HTML en natif

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

c'est un code simple que je viens d'écrire pour résoudre ce problème, sans supprimer la ligne d'en-tête (la première).

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

J'espère que ça marche pour toi!!.

1
user3423649

Si vous ne voulez pas supprimer th et que vous voulez simplement supprimer les lignes à l'intérieur, cela fonctionne parfaitement.

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

À l'exception de Header & Footer, vous utilisez ce code pour supprimer la Body de la table.

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

Que dis-tu de ça:

Lors du premier chargement de la page, procédez comme suit:

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

Ensuite, lorsque vous souhaitez effacer le tableau:

myTable.innerHTML=myTable.oldHTML;

Le résultat sera votre rangée d'en-tête. Si c'est tout ce que vous avez commencé avec, les performances sont considérablement plus rapides que la boucle.

0
Len White

Attribuez un identifiant ou une classe à votre tbody. 

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

Vous pouvez nommer votre identifiant ou votre classe comme bon vous semble, pas nécessairement #tbodyId ou .tbodyClass.

0
Andreea

Il suffit de vider le corps de la table.

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

Assing quelque id à tbody tag. c'est à dire. . Après cela, la ligne suivante doit conserver l’en-tête/le pied de table et supprimer toutes les lignes.

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

Et si vous souhaitez que la table entière (en-tête/rangées/pied de page) soit effacée, définissez l'id au niveau de la table i.e.

0
Vinaykumar Patel