Question

I am trying to build a drop-down menu that will show a row to the side of it when you hover over one of the cells with the mouse. I’m really new with using the DOM, and javascript as well.

The problem I’m running into is that the array I have created doesn’t seem to access what I thought it should. Is it just my syntax, or do I need to approach this differently? Here is my code:

window.onload = function () {
    var tableID = "strokerKitMenu";
    var table = document.getElementById(tableID);
    var tableRows = table.getElementsByTagName("tr");
    var tableCell = [];
    var counter = 0;
    for (i = 0; i < tableRows.length; i++) {
        tableCell[i] = new Array();
        tableCell[i].push(tableRows[i].getElementsByTagName("td"));
    }

    for (i = 0; i < tableCell.length; i++) {
        tableCell[0, i].style.display = "block"; //This doesn't compile
        alert(tableCell[0, i].Text); //This comes back "undefined"
        for (j = 1; j < tableCell[i].length; j++) //I haven't even tested this part yet
        {
            tableCell[i][j].onmouseover = function showCell() {
                tableCell[i][j + 1].style.display = "block";
            }
            tableCell[i][j].onmouseout = function hideCell() {
                this.style.display = "none";
            }
        } //end inner for loop
    } //end outer for loop
}

Answer 1

tableCell[i].push.apply(tableCell[i], tableRows[i].getElementsByTagName("td"));

You don’t want to push the single array in. You want to push all the elements in. Otherwise you would have to access them as tableCell[i][0][j]