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

oogrdqng  于 2021-09-13  发布在  Java
关注(0)|答案(4)|浏览(252)

目前,我有一个二乘二阵列: 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 
0 0 0 0 
0 0 0 0 
0 0 0 0 
这就是我想要的布局。但是,document.write()函数会删除所有现有的html代码。如何在原始网页上显示阵列?此外,它需要以我可以用css样式的方式显示。

1l5u6lss

1l5u6lss1#

这里有一种用它填充表的方法。因为您有一个数据网格,所以这是理解它的一种可能方式。

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>
ymdaylpp

ymdaylpp2#

下面是一个与您的使用相匹配的解决方案 span s、 并利用 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>
n53p2ov0

n53p2ov03#

附加到正文的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>";
    }
}
h7wcgrx3

h7wcgrx34#

javascript创建输出的方法还有很多。
document.write()删除以前的所有内容。有一个更好的办法:

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

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

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

相关问题