Discussion :

[lodan]

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é]

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]

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]

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]

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]

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