Question

我正在尝试使用javascript在100个位置绘制游戏面板。

我认为一张桌子将是完美的选择-因此每行将为tr，每一个正方形均为td。我通过上面的代码设法做到这一点。

这个问题虽然我可以从视觉上看到我想要的板子-但实际上我只复制了10次tr。

我正在尝试给每个方块一个唯一的ID。我在这里需要一些指导。

function createBoard() {
    var table = document.getElementById("puzzleBoard");
    table.innerHTML = "";
    for (var r = 0; r < 10; r++) {
        var newRow = document.createElement("tr");
        table.appendChild(newRow);
        for (var c = -1; c < 9; c++) {
            var newCell = document.createElement("td");
            var cellName = (c + 1);
            newRow.appendChild(newCell);
            var newPiece = document.createElement("div");
            //newPiece.setAttribute("id", "cell-0"+cellName;);
            newPiece.innerHTML = "cell-0" + cellName;
            newCell.appendChild(newPiece);
        }
    }
}

Answer 1

尝试cellName = (c + 1) * (r + 1)。

Answer 2

newPiece.innerHTML = `cell-${cellName}-row-${r}`;

Answer 3

最简单的唯一标识符：

cellName++

代码在这里：

function createBoard() {
    var table = document.getElementById("puzzleBoard");
    table.innerHTML = "";

    var cellName = 0;//<-- initialization

    for (var r = 0; r < 10; r++) {
        var newRow = document.createElement("tr");
        table.appendChild(newRow);
        for (var c = -1; c < 9; c++) {
            var newCell = document.createElement("td");

            newRow.appendChild(newCell);
            var newPiece = document.createElement("div");
            newPiece.setAttribute("id", "cell-"+cellName);//<-- set id
            newPiece.innerHTML = "cell-"+cellName;

            cellName++;//<-- plus 1

            newCell.appendChild(newPiece);
        }
    }
}

现在，我们有了一个10x10的矩阵，可以在其中执行更简单的数学运算（您在玩游戏）。每个单元格都有一个从0到99的数字。

如何使用javascript创建具有100个唯一td的html表

3 个答案: