Question

如何使中间列为X而不是0。

这是我的代码：

＆＃13;

var table = document.createElement('table'), tr, td, row, cell;
for (row = 0; row < 3; row++) {
    tr = document.createElement('tr');
    for (cell = 0; cell < 3; cell++) {
        td = document.createElement('td');
        tr.appendChild(td);
        td.innerHTML = 0 
    }
    table.appendChild(tr);
}
document.getElementById('container').appendChild(table);

＆＃13;

<div id="container"></div>

＆＃13;

Answer 1

如果单元格是1，您可以添加一个检查。然后选择'X'。

var table = document.createElement('table'),
    tr, td, row, cell;

for (row = 0; row < 3; row++) {
    tr = document.createElement('tr');
    for (cell = 0; cell < 3; cell++) {
        td = document.createElement('td');
        tr.appendChild(td);
        td.innerHTML = cell === 1 ? 'X' : 0;
    }
    table.appendChild(tr);
}
document.getElementById('container').appendChild(table);

<div id="container">
</div>

Answer 2

一种选择是使用开关：

var table = document.createElement('table');
for (var row = 0; row < 3; row++) {
    var tr = document.createElement('tr');
    for (var cell = 0; cell < 3; cell++) {
        var td = document.createElement('td');
        //console.log(cell);
        var cellText = "";
        // This switch picks content based on cell order
        switch(cell) {
        case 0: cellText = "0"; break;
        case 1: cellText = "X"; break;
        case 2: cellText = "0"; break;
        // Default value if cell count changes
        default: cellText = "Unknown cell!";
        }
        // Using `new Text` ensures the value is entered as text, not HTML
        // This can protect you from XSS or unexpected behavior
        td.appendChild(new Text(cellText));
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
document.getElementById('container').appendChild(table);

<div id="container">

</div>

这不是最易维护的解决方案，但对于简单的脚本来说已经足够了。

如何在JS中使用嵌套循环制作表

2 个答案: