将数组元素添加到表格单元格答案

【问题标题】：Adding array elements to table cells将数组元素添加到表格单元格
【发布时间】：2013-12-27 15:35:27
【问题描述】：

// Creates a table for my game.
var table = document.createElement("table");
table.border = 1;

// Generates a table with 4 rows and 4 columns
for (var i = 0; i < 4; ++i) {
    var row = document.createElement("tr");
    table.appendChild(row);

    // Creates a cell with the respective number
    for (var j = 0; j < 4; ++j) {
        var cell = document.createElement("td");
        row.appendChild(cell);
        cell.appendChild(document.createTextNode(myArray));
    };
};

innerDiv.appendChild(table);

我正在用纯 Javascript 制作一个记忆游戏，这是我用来生成游戏板的代码，一个 4x4 单元格的表格。我有一个由 16 个随机生成的数字组成的数组（每个数字 1 个），并且想在每个单元格中放置一个数字，但我无法弄清楚如何为其编写代码。

【问题讨论】：

我相信问题是没有正确增加k。尝试cell.innerHTML = myArray[i*4+j]; 而不是cell.appendChild(...)。当然，假设您在 myArray.. 中有 16 个值。
工作就像一个魅力，谢谢。

标签： javascript arrays html-table cell

【解决方案1】：

我认为您需要先将文本节点添加到单元格元素中，然后再将其放入单元格中。

    // Skapar en cell med respektive siffra.
    for (var j = 0; j < 4; ++j) {
        var cell = document.createElement("td");
        cell.appendChild(document.createTextNode(myArray[k]));  //// switched line
        row.appendChild(cell);  //// switched line
    };

【讨论】：

【解决方案2】：

尝试如下：

// Creates a table for my game.
var table = document.createElement("table");
table.border = 1;

// Generates a table with 4 rows and 4 columns
for (var i = 0; i < 4; ++i) {
    var row = document.createElement("tr");
    table.appendChild(row);

    // Skapar en cell med respektive siffra.
    for (var j = 0; j < 4; ++j) {
        var cell = document.createElement("td");      
        cell.appendChild(document.createTextNode(myArray[k]));
        row.appendChild(cell);
    };
};

innerDiv.appendChild(table);

您在 td 中分配值之前附加了它。创建文本节点后尝试追加。

【讨论】：

【解决方案3】：

替换

cell.appendChild(document.createTextNode(myArray[k]));

与

cell.appendChild(document.createTextNode(i*4+(j+1)));

【讨论】：