Looping through siblings of a specific row/setting up function

Trying to work through my javascript book I am referencing to learn the l开发者_运维百科anguage and got stuck on looping through siblings of a specific row. W3schools and W3 didnt have what i was looking for. Below is a function walk-through...

It reads: Create the countRecords() function. The purpose of this function is to count the number of visible rows in the data table after the table headings. The total is then displayed in the table cell with the id "records". Add the follow commands to the function:

a. Create a object named headRow that points to the table row with the id "titleRow". Create a variable named rowCount, setting its initial value to 0.

b. Create a for loop that uses familial references starting with the first sibling of headRow and moving to the next sibling until there are no siblings left. Within the for loop. test whether the node name of the currentnext sibling until there are no sibilings left. Within the for loop test whether the node name of the current node is equal to "TR". If it is, test wheter the value of its display style is equal to an empty text string. If it is (indicating that it is visible in the document) increate the value of the rowCount variable by 1.

c. Change the text of the "records" table cell to the value of the rowCount variable. Don't use innerHTML. Create a text node that contains the value of the rowCount variable and assign it to a variable called txt. Create a variable called record to store the reference to the element "records" table cell.

d. Insert an if condition that test whether the "records" cell has any child nodes. If it does, replace the replace the text node of the "record" table cell with the created text node (txt). If it doesn't append the text node to the cell.

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

//part b this is where I get lost. I know I need to access the id titleRow but unsure how to set my loop up specifically for this

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

//part c

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

//part d holding off on this part until I get a,b,c figured out.

The HTML supporting snippet:

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

Thanks for the help!

You should check out the nextSibling property. I'm not sure how strictly you want to follow your book but a while loop seems more appropriate than a 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
}

If you're insistent on using a for loop, I suppose you could do something like this:

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
}

/** * Schedules a command to retrieve the count of WebElements * this function can be called from your Helper Control to your page object * method */

  console.log('Driver: ' + this.driver);
  let test = await this.driver.findElements({css: this.cssLocator})
  console.log('--test: ' + test);
  console.log('--test length: ' + test.length);
  return test.length;