Supprimer les children dans un tbody [Résolu]

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
8
9
10
11
12
13
14
15
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

mekal · 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

Citation:

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

oui, c'est la balise fermante du TBODY

Citation:

</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....

Citation:

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

Citation:

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...

Citation:

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

06/01/2011, 09h03	#4
lodan Membre extrêmement actif Inscription : juin 2006 Messages : 1 804 Détails du profil Informations forums : Inscription : juin 2006 Messages : 1 804 Points : 587 Points : 587	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 __________________ Y a pas, plus on fait, plus on sait. Plus on cherche, plus on sait chercher. Maintenant quant à trouver, c'est autre chose.
	00

06/01/2011, 13h22	#9
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 926 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 926 Points : 4 737 Points : 4 737	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>
	00

06/01/2011, 15h00	#13
lodan Membre extrêmement actif Inscription : juin 2006 Messages : 1 804 Détails du profil Informations forums : Inscription : juin 2006 Messages : 1 804 Points : 587 Points : 587	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. __________________ Y a pas, plus on fait, plus on sait. Plus on cherche, plus on sait chercher. Maintenant quant à trouver, c'est autre chose.
	00

06/01/2011, 15h25	#16
lodan Membre extrêmement actif Inscription : juin 2006 Messages : 1 804 Détails du profil Informations forums : Inscription : juin 2006 Messages : 1 804 Points : 587 Points : 587	Merci Monsieur le Président __________________ Y a pas, plus on fait, plus on sait. Plus on cherche, plus on sait chercher. Maintenant quant à trouver, c'est autre chose.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email