[DOM] childNodes.length Incohérent

**Adorien** · 07/10/2010, 14h34

Bonjour,

J'ai une structure de cette forme :

Code :

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

1
2
3
4
5
6
 
<tbody>
<tr id="un"></tr>
<tr id="deux"></tr>
<tr id="trois"></tr>
</tbody>

Quand j'effectue un childNodes.length pour connaître le nombre d'enfant de la balise <tbody>, il me sort qu'il y en a quatre.
Quand je demande à afficher l'id du dernier enfant, il m'affiche l'id du 2nd (c'est à dire "deux" au lieu de "trois").

Quelqu'un aurait-il une idée pour résoudre cette énigme?

Merci par avance

**vermine** · 07/10/2010, 14h46

Bonjour,

Pourrions-nous avoir un peu plus de code ?
A savoir la structure complète de la table (vous n'avez pas de <td> ?) et le code qui sélectionne le childNodes.length.

**Adorien** · 07/10/2010, 14h50

Bonjour,

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
 
<table id="chapitre_table_1">
 <tbody id="tbodyalanoix">
  <tr id="tcha_1">
   <td>Titre du chapitre : </td>
   <td><textarea cols="50" rows="1" name="tcha_1" ></textarea></td>
   <td><input type="button" value="ajouter_chapitre" onclick="ajouter_chapitre()"></input></td>
  </tr>  
  <tr id="tr_schapitre_table_11">
  <table id="schapitre_table_11">
   <tr id="tsch_11">
    <td>Titre du sous-chapitre : </td>
    <td><textarea cols="50" rows="1" name="tsch_11"></textarea></td>
    <td><input type="button" value="ajouter_schapitre" onclick="ajouter_schapitre(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
   </tr>
   <table id="id_table_para_111">
    <tr id="para_111">
     <td>Contenu du paragraphe : </td>
     <td><textarea cols="80" rows="10" name="para_111"></textarea></td>
     <td><input type="button" value="ajouter_paragraphe" onclick="ajouter_paragraphe(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
    </tr>
   </table>
  </table>
  </tr>   
  <tr id="tr_schapitre_table_12">
  <table id="schapitre_table_12">
   <tr id="tsch_12">
    <td>Titre du sous-chapitre : </td>
    <td><textarea cols="50" rows="1" name="tsch_12"></textarea></td>
    <td><input type="button" value="ajouter_schapitre" onclick="ajouter_schapitre(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
   </tr>
   <table id="id_table_para_121">
    <tr id="para_121">
     <td>Contenu du paragraphe : </td>
     <td><textarea cols="80" rows="10" name="para_121"></textarea></td>
     <td><input type="button" value="ajouter_paragraphe" onclick="ajouter_paragraphe(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
    </tr>
   </table>
  </table>
  </tr>
  </tbody>
 </table>

Voici le code complet.
La fonction javascript que j'appelle contient ceci :

Code :

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

1
2
3
 
window.alert(document.getElementById('tbodyalanoix').childNodes.length);
window.alert(document.getElementById('tbodyalanoix').lastChild.id);

**vermine** · 07/10/2010, 15h07

J'ai exécuté votre code et il m'annonce deux lignes dans le <thead> et "tr_schapitre_table_11" comme lastChild.id.

Ce qui tombe plutôt bien vu que c'est ce qui est créé.

PS : j'ai testé sous IE7.

**Watilin** · 07/10/2010, 16h46

Tu oublies des tas de <tr> et de <td> quand tu mets des sous-tables… Les moteurs JavaScript sont balèzes quand il s’agit de compléter les trous du DOM, mais faut quand même pas pousser.

Avec le code suivant (qui passe la validation), j’obtiens 7 pour childNodes.length, ce qui est normal avec les nœuds #text.

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tbody à la noix</title>
</head>
<body>
 
<table id="chapitre_table_1">
  <tbody id="tbodyalanoix">
    <tr id="tcha_1">
      <td>Titre du chapitre : </td>
      <td><textarea cols="50" rows="1" name="tcha_1" ></textarea></td>
      <td><input type="button" value="ajouter_chapitre" onclick="ajouter_chapitre()"></input></td>
    </tr>  
    <tr id="tr_schapitre_table_11">
      <td>
        <table id="schapitre_table_11">
          <tr id="tsch_11">
            <td>Titre du sous-chapitre : </td>
            <td><textarea cols="50" rows="1" name="tsch_11"></textarea></td>
            <td><input type="button" value="ajouter_schapitre" onclick="ajouter_schapitre(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
          </tr>
          <tr>
            <td>
              <table id="id_table_para_111">
                <tr id="para_111">
                  <td>Contenu du paragraphe : </td>
                  <td><textarea cols="80" rows="10" name="para_111"></textarea></td>
                  <td><input type="button" value="ajouter_paragraphe" onclick="ajouter_paragraphe(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>   
    <tr id="tr_schapitre_table_12">
      <td>
        <table id="schapitre_table_12">
          <tr id="tsch_12">
            <td>Titre du sous-chapitre : </td>
            <td><textarea cols="50" rows="1" name="tsch_12"></textarea></td>
            <td><input type="button" value="ajouter_schapitre" onclick="ajouter_schapitre(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
          </tr>
          <tr>
            <td>
              <table id="id_table_para_121">
                <tr id="para_121">
                  <td>Contenu du paragraphe : </td>
                  <td><textarea cols="80" rows="10" name="para_121"></textarea></td>
                  <td><input type="button" value="ajouter_paragraphe" onclick="ajouter_paragraphe(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>
 
</body>
</html>

( Ça c’est bonus : [ame="http://www.google.fr/search?hl=fr&q=mise+en+page+tableaux"]mise en page tableaux - Recherche Google[/ame] )

**SpaceFrog** · 07/10/2010, 18h49

sinon un peu de lecture...
http://www.developpez.net/forums/d98...yle-ne-marche/

**vermine** · 07/10/2010, 20h36

Le thead n'a que deux lignes. Ces lignes ont des cellules puis des tables, mais ça, ce ne sont pas les enfants du thead mais bien ses petits-[...-petits-]enfants.

Mon résultat me semble cohérent étant donné que je demande les enfants du thead et non pas les enfants des enfants du thead et leurs enfants et leurs enfants et leurs enfants...

**SpaceFrog** · 08/10/2010, 11h06

verfie dans une boucle sur les childNodes et imprimant le nodeName ?

**vermine** · 08/10/2010, 11h34

Avec le code de Adorien et ceci :

Code js :

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

1
2
3
4
5
6
7
8
9
 
var temp = "";
var t_body_child = document.getElementById('tbodyalanoix').childNodes;
for(var i=0; i<t_body_child.length; i++)
{
   temp += t_body_child[i].nodeName + ", ";
}
 
alert(temp);

J'obtiens "TR, TR, ".
Je rappelle que je n'ai testé que sous IE7.

Bon, peut-être que SpaceFrog ne me parlait pas.

[DOM] childNodes.length Incohérent

JavaScript

Discussions similaires

Partager

Partager