0

我使用表格创建了一个棋盘。我想检索单元格的 x 和 y 坐标。但是，this.parentNode.rowIndex一直给我-1。我花了无数个小时寻找错误。谁能帮我找到它？

var board = [[1, 0, 1, 0, 1, 0, 1, 0],
         [0, 1, 0, 1, 0, 1, 0, 1],
         [1, 0, 1, 0, 1, 0, 1, 0],
         [0, 0, 0, 0, 0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0, 0, 0],
         [0, -1, 0, -1, 0, -1, 0, -1],
         [-1, 0, -1, 0, -1, 0, -1, 0],
         [0, -1, 0, -1, 0, -1, 0, -1]];

var gray = -1; //distinguishing players
var red = 1;

function makeBoard() {
//create a table
var tbl = document.createElement("table");
//create a <tr> for each row
for (var i = 0; i < 8; i++) {
    var tr = document.createElement("tr");

    //create a <td> for each column
    for (var j = 0; j < 8; j++) {
        var td = document.createElement("td");
        //setting the attributes of a square
        td.setAttribute("width", "50");
        td.setAttribute("height", "50");
        if ((i % 2 == 0 && j % 2 != 0) || (i % 2 !=0 && j % 2 == 0)) {
            td.style.backgroundColor = "black";
        }
        else if (board[i][j] == red) {
            td.style.backgroundColor = "red";
        }
        else if (board[i][j] == gray) {
            td.style.backgroundColor = "gray";
        }
        td.onclick = function() {
            alert(this.cellIndex + ", " + this.parentNode.rowIndex); //RETRIEVING WRONG COORDINATES
        }
        tr.appendChild(td);
    }
    tbl.appendChild(tr);
}
tbl.setAttribute("border", "10");
return tbl;
}

如果您觉得缺少什么，请告诉我。

4

2 回答 2

1

尝试使用

sectionRowIndex而不仅仅是index..

似乎在 chrome 和 Firefox 中都可以正常工作

this.parentNode.sectionRowIndex

检查小提琴

于 2012-11-12T22:13:58.977 回答
1

在这种情况下，缺少的 tbody 似乎并不是问题。看起来这与添加行和单元格的方式有关。

而不是使用 appendChild 你应该使用 table.insertRow 和 row.insertCell 方法

所以当添加一行时，而不是

var tr = document.createElement("tr");

利用

var tr = tbl.insertRow(0);

同样适用于细胞，使用

var td = tr.insertCell(j);

还要删除块末尾对 tr 和 td 的 appendChild 调用

在这里工作修复http://jsfiddle.net/nBbd2/30/

于 2012-11-12T22:19:55.383 回答