Question

我使用表创建了一个跳棋板。我想检索单元格的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;
}

如果您觉得缺少某些东西，请告诉我。

Answer 1

尝试使用

sectionRowIndex而非index ..

似乎在Chrome和Firefox中都能正常工作

this.parentNode.sectionRowIndex

<强> Check Fiddle

Answer 2

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

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

所以在添加行时，而不是

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

使用

var tr = tbl.insertRow(0);

同样适用于细胞，请使用

var td = tr.insertCell(j);

同时删除块的末尾的tr和td的appendChild调用

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

检索不正确的表坐标

2 个答案: