Drop Down Functions for a Common Browser Menu - The Third Segment of the dropDownMenu() Function
(Page 2 of 4 )
This is the segment:
//get the row positions of the SPAN elements
var pos = ID.charAt(1);
pos = parseInt(pos);
//display the corresponding TD background color with SPAN elements
for (i=0; i<5; i++)
{
//form the TD ID
tdID = 'TD' + i + pos;
//form ID of SPAN
spanID = 'S' + i + pos;
if (document.getElementById(spanID)) //if it exist
{
document.getElementById(tdID).style.backgroundColor = "brown";
document.getElementById(spanID).style.display = "block";
//indicate the cell that is displayed in the boolean table
document.getElementById('TB').rows[i].cells[pos].innerHTML = "true";
//indicate the first two numbers of the shown SPAN ID in the table that shows the Nos.
number = "" + i + pos;
document.getElementById('TNo').rows[i].cells[pos].innerHTML = number;
}
}
The aim of this segment is to display the SPAN elements that are to appear under the Drop Down button you have clicked. As we have seen before, these SPAN elements may be of different sub levels. It is the ones at the first sub level that are displayed. The ones at the first sub level have IDs with two digits; the ones at the second sub level have IDs with four (two pairs) digits; the ones at the next sub level have IDs with six (three pairs) digits. Only the ones with two digits are displayed. For the ones with two digits, the first digit is the table row number and the second digit is the table column number. This is what the code uses to identify the particular SPAN elements.
The dropDownMenu() function has the ID as its parameter. The argument for this ID is the ID of the Drop Down Button. This function is called when you click the Drop Down Button. The ID is then sent.
This ID is made up of two characters; first the letter D, and then the position of the button. The first button is considered to be at position 0, the next one at position 1, the next at 2, and so on. At the beginning of the segment, you have a line that extracts the position number using the JavaScript string method, charAt(). Note: the ID argument is a string. The return value is assigned to the pos variable. The next statement makes sure this value is an integer using the parseInt() top level JavaScript function. Note: the charAt() method returns a character.
The next statement is a for-loop with quite a good number of statements inside. The loop iterates from 0 to 4; five iterations for five rows (in a column) in the table. For each iteration, the ID of the cell is first formed. The value of the pos variable becomes the second digit (column number) of the ID. The iteration number becomes the first digit (row number). Each ID begins with "TD." The next statement in the for-loop develops the ID of the SPAN element to be displayed. The ID of each SPAN element begins with "S." The number part of the ID of the immediate SPAN element is the same as the number part of the ID of the table cell.
Next: The Third Segment of the dropDownMenu() Function Continued >>
More HTML Articles
More By Chrysanthus Forcha
