显示不带document.write()的多维数组

Question

目前，我有一个二乘二的数组：let gameBoard = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]我想在我的网页上打印这个数组。我是通过使用document.write((.来完成的

function updateScreen(){
for(var i=0; i<4; i++){
for(var j=0; j<4; j++){
document.write('<span>' + gameBoard[i][j] + '&emsp;</span>')
}
document.write("<br><br>")
}
}

这在网页上以2x2矩阵的形式显示阵列，如下所示：

0000

0000

0000

0000

这就是我想要的布局。但是，document.write((函数会删除我现有的所有HTML代码。如何在原始网页上显示数组？此外，它需要以我可以用CSS设置样式的方式显示。

Answer 1

这里有一种用它填充表的方法。由于你有一个数据网格，这是一种理解它的可能方法。

let gameBoard = [
['a', 'b', 'c', 'd'],
['1', '2', '3', '4'],
['+', '*', '@', '&'],
['Z', 'Y', 'X', 'W']
];
function updateScreen() {
let arr = [0, 1, 2, 3],
table = document.querySelector('table');
arr.forEach(x => {
let row = table.insertRow();
arr.forEach(y => row.insertCell(y).appendChild(document.createTextNode(gameBoard[x][y])))
})
}
updateScreen();

.board {
border-collapse : separate;
border-spacing: 5px;
}
.board td {
padding: 15px;
border: 1px solid #ccc;
text-align:center;
background:#f0f0f0;
border-radius:4px;
vertical-align:middle;
}

<table class='board'></table>

Answer 2

这里有一个解决方案，它与spans的使用相匹配，并利用DocumentFragment对象，以减少回流次数。

<div id="gameBoard"></div>
<script>
var gameBoard = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]
function updateScreen()
{
let rows = gameBoard.length;
let cols = gameBoard[0].length; // assumes at least the 0th index is set
let fragment = new DocumentFragment();
let linebreak = document.createElement('br');
for(let i = 0; i < rows; i++)
{
for(let j = 0; j < cols; j++)
{
let cell = document.createElement('span');
cell.innerText = gameBoard[i][j];
fragment.append(cell, "&nbsp;");
}
fragment.append(linebreak.cloneNode(), linebreak.cloneNode());
}
document.getElementById('gameBoard').appendChild(fragment);
}
</script>

Answer 3

附加到主体的innerHTML:

function updateScreen(){
for(var i=0; i<4; i++){
for(var j=0; j<4; j++){
document.body.innerHTML+='<span>' + gameBoard[i][j] + '&emsp;</span>';
}
document.body.innerHTML+="<br><br>";
}
}

Answer 4

Javascript可以通过多种方式创建输出。

document.write((删除以前的所有concent。还有一个更好的：

<div id="here"></div>
<script>
document.getElementById("here").innerHTML = "hey I am a cool text";
</script>

更多信息：https://www.w3schools.com/js/js_output.asp