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

时间:2013-12-10 08:03:43

标签: javascript arrays html-table cell

// 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个paif),并希望在每个单元格中放置一个数字,但我无法绕过如何为其编写代码。

3 个答案:

答案 0 :(得分:0)

我认为您需要在将文本节点放入单元格之前将其添加到单元格元素中。

    // 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
    };

答案 1 :(得分:0)

尝试如下:

// 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。尝试在创建文本节点后附加。

答案 2 :(得分:0)

替换

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

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