显示没有 document.write() 的多维数组答案

【问题标题】：Displaying a multidimensional array without document.write()显示没有 document.write() 的多维数组
【发布时间】：2021-07-11 19:17:27
【问题描述】：

目前，我有一个二乘二数组：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 矩阵的形式显示数组，如下所示：

0 0 0 0

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

【问题讨论】：

如果你创建一个 id 为 target 的 div，你可以定位一个元素，然后你可以做 var loop = ''; loop+= '' + gameBoard[i][j] + ' '; document.getElementById('target).innerHTML = 循环

标签： javascript html css arrays

【解决方案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;
}

&lt;table class='board'&gt;&lt;/table&gt;

【讨论】：

【解决方案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>

【讨论】：

有趣的答案。我以前从未使用过 DocumentFragment()。赞成
@Kinglish 谢谢。它在性能方面的实际改进备受争议，但它仍然是解决问题的一个非常“适当”的解决方案。

【解决方案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>";
    }
}

【讨论】：

【解决方案4】：

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

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

<div id="here"></div>

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

【讨论】：