javascript - 如何让二维数组动态拆分成行

Question

我正在用 javascript 为学校制作一个井字游戏，但我处于停滞状态。按照我的设置方式，我的游戏不会像 tictactoe 游戏那样显示。有没有办法将二维数组拆分为 3 行 3 列？

function TicTacToe() {
	this.board = [[0, 0, 0],
		[0, 0, 0],
		[0, 0, 0]
	];
	this.showhtml = toHTML;
}

function toHTML() {
	var gametable = document.getElementById("tictable");
	for (var i = 0; i < this.board.length; i++) {
		for (var j = 0; j < this.board[i].length; j++) {
			gametable.innerHTML += ("<td>" + this.board[i][j] + "</td>");
		}
	}
}

tic = new TicTacToe();
tic.showhtml();

<table id="tictable">

Answer 1

您忘记添加表格行 (<tr>)。另外请注意，您不必在每次迭代时都设置 innerHTML。将标签收集到屏幕上，最后设置 innerHTML。

function TicTacToe() {
  this.board = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
  ];
  this.showhtml = toHTML;
}

function toHTML() {
  var gametable = document.getElementById("tictable");
  var htmlStr = '';

  for (var i = 0; i < this.board.length; i++) {
    
    htmlStr += '<tr>'; // row start
    
    for (var j = 0; j < this.board[i].length; j++) {
      htmlStr += ("<td>" + this.board[i][j] + "</td>");
    }
    
    htmlStr += '</tr>'; // row end
  }

  gametable.innerHTML = htmlStr;
}

tic = new TicTacToe();
tic.showhtml();

<table id="tictable">