Supprimer les children dans un tbody

**lodan** · 05/01/2011, 18h59

Je veux effacer ce qui se trouve dans mon tbody

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<tbody id="label">
<tr>
<td>....</td>
<td>....</td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
</tbody>

Je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("label").parentNode.removeChild(document.getElementById("label"));

Je rajoute des lignes apartir d'info provenant de la base de données

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode(liste5[i].firstChild.nodeValue));
tr.appendChild(td);
document.getElementById("label").appendChild(tr);

Avec un bouton je veux initialiser ma page et je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
Je fais 
	
	Code  :
	Sélectionner tout -
	Visualiser dans une fenêtre à part
	document.getElementById("label").parentNode.removeChild(document.getElementById("label"));

Mais il ne se passe rien.

Aurai-je supprimé mon parent ?

Merci d'avance pour vos lumières

Invité · 05/01/2011, 19h41

quand tu fait ceci tu te positionne au niveau du parent du tbody tu supprime donc le tbody

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("label").parentNode.removeChild(document.getElementById("label"));

pour supprimer ce qu'il y a dans le tbody il ne fautpas mettre parentNode

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("label").removeChild();

et si je me trompe pas il faudra boucler pour tous les tr a moins que quelqu'un ai une autre idee

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 
var cibletr = document.getElementById("label").getElementByTagName("tr");
 
 for (var i = 0; i< cibletr.length; i++){
document.getElementById("label").removeChild(cibletr[i]);
 
}

**NoSmoking** · 05/01/2011, 20h27

où alors de façon plus générique

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function removeAllChild( id){
  var oChild, oParent = document.getElementById( id);
  if( oParent){
    while( (oChild = oParent.firstChild)){
      oParent.removeChild(oParent.firstChild);
    }
  }
}

**lodan** · 06/01/2011, 09h03

Merci à vous,

Mekal : J'ai une erreur me disant que la 1ère ligne n'est pas une fonction

NoSmoking : j'ai tester ta fonction générique qui supprime bien la 1ère fois et ensuite dans mon code généré je retrouve ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

</tbody><tbody id="label"></tbody>

Est-il normal qu'un </tbody> reste ?

Ensuite il ne supprime plus rien, il ajoute les lignes à la suite

**lodan** · 06/01/2011, 09h38

En fait, à partir de la 2ème fois, il ne passe pas dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
while( (oChild = oParent.firstChild))
        {
            oParent.removeChild(oParent.firstChild);
        }

Donc cela veut dire que les lignes créées ne sont pas dans mon tbody ?

Et oui, mes lignes sont après

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

</tbody><tbody id="label"></tbody>

Lorsque je rajoute mes lignes dans mon JS, ma dernière ligne est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("label").appendChild(tr);

**NoSmoking** · 06/01/2011, 11h33

Est-il normal qu'un </tbody> reste ?

oui, c'est la balise fermante du TBODY

</tbody><tbody id="label"></tbody>

l'ajout ne se fait donc pas au bonne endroit, mais comme on n'a pas la fonction complète de construction difficile à dire

voici une fonction de construction utilisant insertRow et insertCell sur le TBODY

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function createLigne( id){
  var oRow, oCel, oTxt, oParent = document.getElementById( id);
  if( oParent){
    for( var lig = 0; lig < 3; lig++){
      oRow = oParent.insertRow(-1);
      for( var col = 0; col < 3; col++){    
        oCel = oRow.insertCell(-1);
        oTxt = document.createTextNode( (oRow.rowIndex +1) +'-' + (oCel.cellIndex +1));
        oCel.appendChild( oTxt);  
      }      
    }  
  }
}

je te mets un fichier de test de l'insertion et de la suppression pour test et enseignement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cr&eacute;tion  TABLE</title>
<style type="text/css">
table {
  border : 1px solid #e0e0e0;
  empty-cells : show;
}
td {
  border : 1px solid #e0e0e0;
}
 
</style>
<script type="text/javascript">
function removeAllChild( id){
  var oChild, oParent = document.getElementById( id);
  if( oParent){
    while( (oChild = oParent.firstChild)){
      oParent.removeChild(oParent.firstChild);
    }
  }
}
function createLigne( id){
  var oRow, oCel, oTxt, oParent = document.getElementById( id);
  if( oParent){
    for( var lig = 0; lig < 3; lig++){
      oRow = oParent.insertRow(-1);
      for( var col = 0; col < 3; col++){    
        oCel = oRow.insertCell(-1);
        oTxt = document.createTextNode( (oRow.rowIndex +1) +'-' + (oCel.cellIndex +1));
        oCel.appendChild( oTxt);  
      }      
    }  
  }
}
</script>
</head>
<body>
<button onclick = "removeAllChild( 'label');">Supprimer</button>
<button onclick = "createLigne(  'label');">Ajouter</button>
<table>
  <tbody id="label">
    <tr>
      <td>1-1</td>
      <td>1-2</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
    </tr>
  </tbody>
</table>
</body>
</html>

il ne te restes plus qu'à tester....

Mekal : J'ai une erreur me disant que la 1ère ligne n'est pas une fonction

il manque un s à getElementsByTagName

**SpaceFrog** · 06/01/2011, 11h41

On peut peut être faire plus simple non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function wipetb(){
tb=document.getElementById('label')
while(document.getElementById('label').childNodes[0]){
	document.getElementById('label').removeChild(document.getElementById('label').childNodes[0])
	}
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
<tbody id="label">
<tr>
<td>....</td>
<td>....</td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
</tbody>
</table>
<input type="button" onclick="wipetb()" value="effacer" />

**lodan** · 06/01/2011, 12h31

Merci pour cette démonstration, je l'ai fait fonctionner.

J'arrive pas à comprendre pourquoi je ne mets pas au bon endroit

Mon code de création de ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
removeAllChild("label");
for(var i = 0, m = liste1.length; i < m; i++)
		{ 
            try{
                var tr = document.createElement("tr");
                tr.setAttribute("class", "tabl_middle");
                tr.setAttribute("ondblclick", "newShowModalDialog(\'http://monsite.fr/...\')");
                tr.setAttribute("onmousemove", "couleurOn(this, 0, \'"+liste0[i].firstChild.nodeValue+"\', \'"+liste0[i].firstChild.nodeValue+"\')");
                tr.setAttribute("onmouseout", "couleurOut(this, 0, \'"+liste0[i].firstChild.nodeValue+"\', \'"+liste0[i].firstChild.nodeValue+"\')");
                tr.setAttribute("style", "background-color : "+liste0[i].firstChild.nodeValue);
                // Icone Modification
                var td = document.createElement("td");
                td.setAttribute("class", "t_cellc");
                img = document.createElement("img");
                img.setAttribute("src", "http://monsite.fr/images/ouvrir_dossier.png");
                img.setAttribute("onclick", "newShowModalDialog(\'http://montsite.fr/...\')");
                img.setAttribute("class", "imageClic");
                td.appendChild(img);
                tr.appendChild(td);
                // Icone suppression
                td = document.createElement("td");
                td.setAttribute("class", "t_cellc");
                img = document.createElement("img");
                img.setAttribute("src", "http://monsite.fr/images/poub.png");
                img.setAttribute("onclick", "newShowModalDialog(\'http://montsite.fr/....\')");
                img.setAttribute("class", "imageClic");
                td.appendChild(img);
                tr.appendChild(td);
                // Icone statut id_trt
                td = document.createElement("td");
                td.setAttribute("class", "t_cellc");
                img = document.createElement("img");
                img.setAttribute("src", "http://montsite.fr/images/valide.png");
                img.setAttribute("class", "imageClic");
                td.appendChild(img);
                tr.appendChild(td);
                // Date et Heure évènements
                td = document.createElement("td");
                td.setAttribute("class", "t_cellc");
                td.appendChild(document.createTextNode(liste2[i].firstChild.nodeValue));
                tr.appendChild(td);
                // Date clôture évènement
                td = document.createElement("td");
                td.setAttribute("class", "t_cellc");
                if(liste3[i].firstChild != null) td.appendChild(document.createTextNode(liste3[i].firstChild.nodeValue));
                tr.appendChild(td);
                // Type
                td = document.createElement("td");
                td.setAttribute("class", "t_cell");
                td.appendChild(document.createTextNode(liste4[i].firstChild.nodeValue));
                tr.appendChild(td);
                // Message
                td = document.createElement("td");
                td.setAttribute("class", "t_cellg");
                td.appendChild(document.createTextNode(liste5[i].firstChild.nodeValue));
                tr.appendChild(td);
                // Lien document
                td = document.createElement("td");
                td.setAttribute("class", "t_cellg");
                a = document.createElement("a");
                a.setAttribute("href", liste6[i].firstChild.nodeValue);
                a.setAttribute("class", "aide");
                a.appendChild(document.createTextNode(liste7[i].firstChild.nodeValue));
                td.appendChild(a);
                tr.appendChild(td);
 
                document.getElementById("label").appendChild(tr);
                }
                catch(e) 
               {                               
                   alert(e);                              
               }
		}

Mon code de suppression

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function removeAllChild(id)
{
    var oChild, oParent = document.getElementById(id);
    if( oParent)
    {
        while( (oChild = oParent.firstChild))
        {
            oParent.removeChild(oParent.firstChild);
        }
    }
}

**NoSmoking** · 06/01/2011, 13h22

je ne vois pas de lézard dans ta façon d'ajouter les éléments, bien que je préféres utiliser insertRow et insertCell dans de telles conditions. Le résultat étant au final le même.

Une remarque qu'en même le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

liste0[i].firstChild.nodeValue

me paraît pour le moins surprenant, qu'est liste0 au départ, un Array ?

Comment sais tu que tu n'insères pas au bon endroit?

mets ta table dans une DIV id="la_div" et crées un button,
par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onclick = "alert(document.getElementById('le_div').innerHTML);">Voir innerHTML</button>

**lodan** · 06/01/2011, 13h42

liste0[i] est un tableau contenant des informations provenant d'une requête MySql en ajax

Ce qui me fait dire que je ne suis pas au bon endroit c'est ceci après le1er effacement de lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <table id="tableauEvenements" width="100%">
					<colgroup>
					<col width="1%">
					<col width="1%">
					<col width="1%">
					<col width="6%">
                    <col width="6%">
					<col width="10%">
					<col width="50%">
					<col width="25%">
					</colgroup>
			   		<tbody><tr class="t_titre">
			      		<td rowspan="2" colspan="3">Actions</td>
				  		<td colspan="2">Date</td>
				  		<td rowspan="2">Type</td>
				  		<td rowspan="2">Evenement</td>
						<td rowspan="2">Document</td>
			   		</tr>
                    <tr class="t_titre">
			      		<td>Evènement</td>
				  		<td>Clôture</td>
			   		</tr>
			   								                    </tbody><tbody id="clientEvenements"></tbody>
					<tr style="background-color: rgb(255, 255, 204);" onmouseout="couleurOut(this, 0, '#ffffcc', '#ffffcc')" onmousemove="couleurOn(this, 0, '#ffffcc', '#ffffcc')" ondblclick="newShowModalDialog('http://monsite.fr/...

Et l'on voit bien que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr style="background-color: ...

est à l'extérieur du tbody

**SpaceFrog** · 06/01/2011, 13h44

c'est normal ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 td.appendChild(img);
                tr.appendChild(td);
                // Icone statut id_trt
                td = document.createElement("td");

reaffectation du td ?

**lodan** · 06/01/2011, 13h51

C'est déjà ce que je fais plus haut avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
tr.appendChild(td);
                // Icone suppression
                td = document.createElement("td");

Donc normal ? Je serai tenté de dire Oui

**lodan** · 06/01/2011, 15h00

Merci beaucoup à vous.

ça fonctionne.

La dernière erreur était dans le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("label").appendChild(tr);

J'avais "labell à la place de "label"

C'est la raison pour laquelle les lignes insérées étaient en dehors du tbody.

**lodan** · 06/01/2011, 15h01

Envoyé par SpaceFrog

On peut peut être faire plus simple non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function wipetb(){
tb=document.getElementById('label')
while(document.getElementById('label').childNodes[0]){
	document.getElementById('label').removeChild(document.getElementById('label').childNodes[0])
	}
}

Cette ligne ne sert à rien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tb=document.getElementById('label')

elle n'est pas utilisée dans ta boucle ensuite

**SpaceFrog** · 06/01/2011, 15h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function wipetb(){
tb=document.getElementById('label')
while(tb.hasChildNodes){
tb.removeChild(tb.childNodes[0])
	}
}

**lodan** · 06/01/2011, 15h25

Merci Monsieur le Président

**NoSmoking** · 06/01/2011, 18h29

MEA CULPA
concernant la fonction removeAllChild, j'initialise une variable sans l'utiliser, faute donc, cela devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function removeAllChild( id){
  var oChild, oParent = document.getElementById( id);
  if( oParent){
    while( (oChild = oParent.firstChild)){
      oParent.removeChild( oChild);
    }
  }
}

il est vrai que l'on peut également utiliser la fonction hasChildNodes(), avec les parenthèses, après tout elle existe pour cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function removeAllChild( id){
  var oParent = document.getElementById( id);
  if( oParent){
    while( oParent.hasChildNodes()){
      oParent.removeChild( oParent.firstChild);
    }
  }
}

mais cela tourne au pinaillage, car il y en a d'autres encore...

Envoyé par lodan

J'avais "labell à la place de "label"

C'est la raison pour laquelle les lignes insérées étaient en dehors du tbody.

ce qui me surprend c'est que tu n'ais pas eu de message d'erreur compte tenu du try{}catch(e){}

Supprimer les children dans un tbody

JavaScript

Discussions similaires

Partager

Partager