problème DOM impair avec Firefox

Question

Je rencontre un problème étrange lorsque vous essayez de naviguer dans les lignes et les cellules d'une table dans une boucle while en utilisant javascript. J'utilise Firefox 3.5.7 sur Win7 avec Firebug activé.

J'ai ce balisage:

<table> 
    <tbody> 
     <tr id='firstRow'><td>a</td><td>b</td><td>c</td></tr> 
     <tr><td>a</td><td>b</td><td>c</td></tr> 
     <tr><td>a</td><td>b</td><td>c</td></tr> 
    </tbody> 
</table> 

Et ce javascript:

var row = document.getElementById('firstRow'); 
console.log(row); // Row call 1 
while (row) { 
    console.log(row); // Row call 2 
    row = row.nextSibling; 
} 

Le problème que je vais avoir est que la ligne a commenté "appel Ligne 1", Firebug est délivrer en sortie

<tr id='firstRow'> 

comme prévu. Cependant, dans la boucle while, Firebug me donne

<tr id='firstRow'> 
<TextNode textContent="\n"> 

Il me donne une sortie différente pour exactement la même ligne, même immédiatement après la boucle while commence l'exécution et rien d'autre a touché la ligne. Pour les lignes suivantes, il n'a bien sûr pas id = 'firstRow' en tant qu'attribut. Le plus gros problème que cela me donne est que si je suis dans la boucle while, et que je veux accéder à une cellule particulière de la ligne en cours en utilisant row.cells [0], Firebug me donnera une erreur sur cette ligne .cells est indéfini.

Je veux savoir si quelqu'un pourrait faire la lumière sur cette situation que je traverse.

Answer 1

Firefox capte l'espace entre vos tr éléments comme un nœud supplémentaire. Il suffit d'ajouter un test que le noeud est en effet un tr avant de faire quoi que ce soit avec elle:

var row = document.getElementById('firstRow'); 
console.log(row); // Row call 1 
while (row) { 
    if(row.nodeName == "TR"){ 
     console.log(row); // Row call 2 
    } 
    row = row.nextSibling; 
} 

Notez que les nœuds de texte ont une nodeName de #text et que nodeName retournera toujours le nom de l'élément en majuscules indépendamment de la façon dont vous l'avoir dans votre document.

Answer 2

Le TextNode est correct, car vous l'avez après le </tr>.

Une solution simple consiste à ignorer ces nœuds texte - soit par comptage ou tester si

row.tagName == 'TR' 

Answer 3

Utilisez la collection tbody.rows. Il est plus simple:

var row = document.getElementById('firstRow'); 
console.log(row); // Row call 1 
var tbody = row.parentNode; 
var rows = tbody.rows; 
for (var i=row.rowIndex+1; i<rows.length; i++) { 
row = rows[i]; 
console.log(row); // Row call 2, 3 ... 
} 

Pour plus d'informations, voir http://msdn.microsoft.com/en-us/library/ms537484%28VS.85%29.aspx (ou tout simplement google rowIndex)

EDIT: Si la table contient également thead et/ou tfoot alors il pourrait être plus approprié d'utiliser row.sectionRowIndex