Completing the React Function of a Common Browser Menu

The Seventh Code Segment Details

When you click the drop down button, the whole table is cleaned up. This means that all of the SPAN elements are replaced by the SPAN elements in the Copy Table. Recall that the SPAN elements in the Copy Table are in their original state where the value of the Display property is "none." When you click the drop down button, everything is recopied and we can say the table is cleaned up. This cleaning is done by the dropDownMenu() function.

However, when a sub menu appears, any other sub menu of the same level has to disappear; from what we have explained so far, the SPAN elements for the previous sub menus are not cleaned up. It is the seventh code segment that does this. This is the segment:

//Cleanup removes SPAN elements that are not supposed to be shown, resulting from sub menus.

//get the row no. and col. no. of the current cell ID

cellrowNo = "" + tdID.charAt(2);

cellColNo = "" + tdID.charAt(3);

//get the number of the current SPAN element displayed

spanNo = document.getElementById('TNo').rows[cellrowNo].cells[cellColNo].innerHTML;

//scan the whole table and clear elements that are not supposed to be shown

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

{

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

{

otherSpanNo = document.getElementById('TNo').rows[i].cells[j].innerHTML;

if (otherSpanNo.length > spanNo.length)

{

beginslice = 0;

endslice = spanNo.length;

slicedStr = otherSpanNo.slice(beginslice,endslice);

if (slicedStr != spanNo)

{

//form the IDs of sub menu and backup cells

IDCell = "TD" + i + j;

tdIDBack = 'TDB' + i + j;

//reset the cell content

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

//also reset the background

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

//reset the Boolean and SPAN number tables as well

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

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

}

}

}

}