Trying to work through my javascript book I am referencing to learn
the language 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!
