Faire défiler les frères et sœurs d'une ligne/fonction de configuration spécifique

Question

Essayer de parcourir mon livre javascript Je me suis référé à l'apprentissage de la langue et je me suis retrouvé à boucler des boucles entre frères et sœurs d'une rangée spécifique. W3schools et W3 n'ont pas ce que je cherchais. Ci-dessous est une fonction walk-through ...

Il lit: Créer la fonction countRecords(). Le but de cette fonction est de compter le nombre de lignes visibles dans la table de données après les en-têtes de table. Le total est alors affiché dans la cellule du tableau avec l'identifiant "records". Ajoutez les commandes suivantes à la fonction:

a. Créez un objet nommé headRow qui pointe vers la ligne du tableau avec l'identifiant "titleRow". Créez une variable nommée rowCount, en définissant sa valeur initiale à 0.

b. Créer une boucle for qui utilise des références familiales en commençant par le premier frère de headRow et en passant au frère suivant jusqu'à ce qu'il n'y ait plus de frères et soeurs. Dans la boucle for. tester si le nom de noeud du currentnext frère jusqu'à ce qu'il n'y ait plus de sibilings. Dans le test de boucle for, si le nom de noeud du noeud actuel est égal à "TR". Si c'est le cas, testez si la valeur de son style d'affichage est égale à une chaîne de texte vide. Si c'est le cas (indiquant qu'il est visible dans le document), augmentez la valeur de la variable rowCount de 1.

c. Remplacez le texte de la cellule de table "enregistrements" par la valeur de la variable rowCount. N'utilisez pas innerHTML. Créez un noeud de texte contenant la valeur de la variable rowCount et affectez-le à une variable appelée txt. Créez une variable appelée enregistrement pour stocker la référence dans la cellule de table "enregistrements" de l'élément.

d. Insérez une condition if pour tester si la cellule "records" a des nœuds enfants. Si c'est le cas, remplacez le noeud de texte de la cellule de table "record" par le noeud de texte créé (txt). Si le noeud de texte n'est pas ajouté à la cellule.

var headRow;  // part a 
    var rowCount = 0; 

// partie b c'est là que je me perds. Je sais que je dois accéder à l'identifiant titleRow mais ne savez pas comment mettre ma boucle spécifiquement pour cette

headRow = document.getElementById("titleRow"); 
    for(var i=0; i<headrow.length; i++) 
{ 
if (something is not equal == "TH") 
     { 
     make code happen here 
     } 
    if (is "TR" == ""){ 
    rowCount = +1; 
} 

// partie c

var txt = document.createTextNode(rowCount); 
var record = document.getElementsById("records") 

// partie d la tenue hors de cette partie jusqu'à ce que je a, b, c compris.

L'extrait de support HTML:

<table id="filters"> 
<tr><th colspan="2">Filter Product List</th></tr> 
<tr> 
<td>Records: </td> 
<td id="records"></td> 
</tr> 

<table id="prodTable"> 
<tr><th colspan="8">Digital Cameras</th></tr> 
<tr id="titleRow"> 
<th>Model</th> 
<th>Manufacturer</th> 
<th>Resolution</th> 
<th>Zoom</th> 
<th>Media</th> 
<th>Video</th> 
<th>Microphone</th> 
</tr> 

Merci pour l'aide!

Answer 1

Vous devez extraire la propriété nextSibling. Je ne sais pas comment strictement vous voulez suivre votre livre, mais une boucle while semble plus appropriée qu'une for:

var headRow = document.getElementById("headRow"); 
var rowCount = 0; 
var cRow  = headRow; // used as a reference to the current row 

while (cRow = cRow.nextSibling) // While there is a next sibling, loop 
{ 
    if (cRow.tagName == "TR" && cRow.style.display === "") 
     rowCount++;  // increment rowCount by 1 
} 

Si vous êtes insistant sur l'utilisation d'une boucle for, je suppose que vous pourriez faire quelque chose comme ça :

var headRow = document.getElementById("headRow"); 
var rowCount = 0; 
for (var cRow = headRow.nextSibling; cRow = cRow.nextSibling;) 
{ 
    if (cRow.tagName == "TR" && cRow.style.display === "") 
     rowCount++;  // increment rowCount by 1 
}