Making a Common Browser Menu React

This segment clears all the cells in the column that are not supposed to have a SPAN element shown. Let us go through the segment:

//Clear all the cells in the column that are not supposed to have a SPAN element shown

for (i=0; i<5; i++)

{

if (document.getElementById('TB').rows[i].cells[colNo].innerHTML != "true")

{

//form the IDs of sub menu column and backup cells

IDCol = "TD" + i + colNo;

tdIDBack = 'TDB' + i + colNo;

//reset the cell content

document.getElementById(IDCol).innerHTML = document.getElementById(tdIDBack).innerHTML;

//also reset the background

document.getElementById(IDCol).style.background = "transparent";

//reset the Boolean and SPAN number tables as well

document.getElementById('TB').rows[i].cells[colNo].innerHTML = "";

document.getElementById('TNo').rows[i].cells[colNo].innerHTML = "";

}

}

Here we have a for-loop. The for-loop has one statement, which is an if-statement. This if-statement has other statements inside its block. The for-loop goes through the column that has the cell, which called the react() function.

For each iteration, the segment first of all checks to see if a SPAN element is displayed in a cell where it is not supposed to be displayed. How does this come about? Well, following our setup, consider the case where you have a sub menu coming out from a drop down menu. Not all the cells in the sub menu have a brown background color; that is, not all the cells display a SPAN element. If you move your mouse pointer onto one of the cells in the sub menu, the second segment of the react() function will give the color brown to all the cells in the column with the sub menu. This is not what you want; you wanted the cells that do not have the SPAN element shown to be transparent. So this segment comes in and gives back to those cells their transparent color.

In order to see if a cell in the column (sub column) is not displaying a SPAN element, the segment uses the Boolean Table. Recall that for each cell in our table that has a SPAN element displayed, the Boolean Table has the content “true” in its corresponding cell. The condition of the if-statement tests to see if this content is not “true.” If the content is not “true,” it means the background color is supposed to be transparent and there is not supposed to a SPAN element there; in that case, the statements in the if-block are executed.

Before we look at the lines in the if-block, let us talk about the statement in the if-test. The cells of the Boolean and Number Tables do not have IDs. So to address the cells, you have to use the DOM’s row and column indices (with the object reference, row and column containers). The expression on the left hand side of the assignment operator of the statement is derived from DOM principles. We have seen this kind of expression elsewhere.

It's time to take a break. I'll see you in the next part of the series.