如何从JavaScript中的数组访问DOM节点？

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[0, i].style.display="block";   //This doesn't compile

This syntax is invalid in JavaScript: you have specified two indices for tableCell but I guess you meant tableCell[0][i].style.display="block";

alert(tableCell[0, i].Text);             //This comes back "undefined"

Once you fix the first error, you will want to change this to tableCell[0][i].textContent .

Answer 2

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

您不想推入单个数组。您想推入所有元素。否则，您将不得不作为tableCell[i][0][j]访问它们