Supprimer les children dans un tbody

Version imprimable

Je veux effacer ce qui se trouve dans mon tbody

Code:

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:

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

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

Code:

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:

1
2
3
4
Je fais <div class="bbcode_container">
	<div class="bbcode_description">Code:</div>
	<hr /><code class="bbcode_code"><span style="color: #0080ff;">document</span>.<span style="color: #0080ff;">getElementById</span><span class="br0">(</span><span style="color: #FF0000;">"label"</span><span class="br0">)</span>.parentNode.<span style="color: #0080ff;">removeChild</span><span class="br0">(</span><span style="color: #0080ff;">document</span>.<span style="color: #0080ff;">getElementById</span><span class="br0">(</span><span style="color: #FF0000;">"label"</span><span class="br0">)</span><span class="br0">)</span>;</code><hr />
</div>

Mais il ne se passe rien.

Aurai-je supprimé mon parent ?

Merci d'avance pour vos lumières

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

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:

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:

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

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

Code:

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

06/01/2011, 09h03
lodan

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:

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

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

Ensuite il ne supprime plus rien, il ajoute les lignes à la suite
06/01/2011, 09h38
lodan
En fait, à partir de la 2ème fois, il ne passe pas dans :
Code:

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:

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

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

Code:

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

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:

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:

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

On peut peut être faire plus simple non ?

Code:

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:

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

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:

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:

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

06/01/2011, 13h22
NoSmoking

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:

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:

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

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:

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:

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

est à l'extérieur du tbody

c'est normal ça ?

Code:

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

reaffectation du td ?

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

1 2 3 tr.appendChild(td); // Icone suppression td = document.createElement("td");
Donc normal ? Je serai tenté de dire Oui

06/01/2011, 15h00
lodan

Merci beaucoup à vous.

ça fonctionne.

La dernière erreur était dans le

Code:

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.

Citation:
Envoyé par SpaceFrog
On peut peut être faire plus simple non ?
Code:

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:

tb=document.getElementById('label')

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

Code:

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

06/01/2011, 15h25
lodan

Merci Monsieur le Président
06/01/2011, 18h29
NoSmoking
MEA CULPA
concernant la fonction removeAllChild, j'initialise une variable sans l'utiliser, faute donc, cela devient
Code:

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:

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