More on the React Function for a Common Browser Menu - Code for the Fifth Code Segment
(Page 3 of 4 )
This is the code for the fifth segment:
//if rooArr is empty and if subColNo is not empty
if ((subColNo != "")&&(rootArr == ""))
{
for (i=0; i<5; i++)
{
//form the TD ID
tdIDSub = 'TD' + i + subColNo;
//form ID of SPAN
spanID = 'S' + tdID.charAt(2) + tdID.charAt(3) + i + subColNo;
if (document.getElementById(spanID)) //if it exist
{
//first clear what was in the cell, if anything
oldSpanID = 'S' + document.getElementById('TNo').rows[i].cells[subColNo].innerHTML;
if (document.getElementById(oldSpanID))
document.getElementById(oldSpanID).style.display = "none";
document.getElementById(tdIDSub).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[subColNo].innerHTML = "true";
//indicate the first two numbers of the shown SPAN ID in the table that shows the Nos.
number = "" + tdID.charAt(2) + tdID.charAt(3) + i + subColNo;
document.getElementById('TNo').rows[i].cells[subColNo].innerHTML = number;
}
}
}
All of the statements are in an if-block. The condition in the if-statement tests if the second argument, subColNo of the react() function, is not empty and if the last argument, rooArr of the react() function, is empty. If these two tests are true, it means a sub menu is required directly from a cell in a drop down menu.
The code then proceeds with the statements in the if-block. There is one main statement in the if-block, which is the for-loop. The for-loop iterates through five indices. We have five iterations here, because there are five cells in a column (for our example). In your own project, this number may change.
The first statement in the for-loop creates the ID of the cell for the iteration (index). It uses the iteration number as the row number for the ID and it uses the second parameter, subColNo of the react() function, as the column number for the ID.
The second statement in the for-loop develops the ID of the SPAN element. The number of digits in the number part of the SPAN element for the sub menu we are trying to develop is four. The first two digits of this SPAN element are the digits of the number part of the present cell. The ID of any cell begins with the letters "TD" and is followed by two numbers. The ID of any SPAN element for a sub menu developed from a drop down menu begins with "S" followed by four digits. The second statement forms the SPAN ID by first attributing the letter, "S," followed by the first digit from the cell ID, followed by the second digit from the cell ID, followed by the iteration number, followed by the column number of the cell in the sub menu.
Next: More on the Fifth Code Segment >>
More HTML Articles
More By Chrysanthus Forcha
