如何用 HTML 代码表示这个矩阵？

Question

我有 2d Matrix（镜像），它按我的预期工作。但是，我不知道如何正确编写 JavaScript 代码，因此它不会创建额外的 div 元素。在矩阵中，我有 (x,y) 索引，因此它改变了正确的位置。然而，当需要在屏幕上渲染它时，它会附加（添加） new 。

createBoard() {

    let specialSquares = {

      '3xW': [0, 7, 105],

      '3xL': [20, 76, 80],

      '2xW': [16, 32, 48, 64],

      '2xL': [3, 36, 45, 52, 92, 96, 108],

      'CT': [112]

    };

    this.board = [...new Array(15)].map(x => new Array(15));

    let boardSide = 14;

    for (let i = 0; i <= boardSide / 2; i++) {

      for (let j = 0; j <= boardSide / 2; j++) {

        let num = indexOfTile(i, j)

        for (let ss in specialSquares) {

          let idx = specialSquares[ss].indexOf(num)

          if (idx >= 0) {

            this.board[i][j] = ss;

            break;

          }else

            this.board[i][j] = "_";

        }}}

渲染部分是这样的，基本是一样的：

let specialSquares = {

      '3xW': [0, 7, 105],

      '3xL': [20, 76, 80],

      '2xW': [16, 32, 48, 64],

      '2xL': [3, 36, 45, 52, 92, 96, 108],

      'CS': [112]

    };

    let boardSide = 14;

    $('.board').remove();

    let $board = $('<div class="board"/>').appendTo('body');

    for (let i = 0; i <= boardSide / 2; i++) {

      for (let j = 0; j <= boardSide / 2; j++) {

        let num = indexOfTile(i, j)

        for (let ss in specialSquares) {

          let idx = specialSquares[ss].indexOf(num)

          if (idx >= 0) {

            $board.append('<div/>' + ss)

            break;

          }

          else {

            $board.append('<div /> ')

          }

但每次（idx<0）它都会追加一个新的 div。这不会发生在控制台上的数组中，因为我有确切的位置 (i,j)。

Answer 1

我会创建一个空板并且不再重新创建它。只需为每个图块提供特定的类或 ID 及其坐标，例如<div id='tile-0-7', class='tile'></div>. 然后，不必删除并重新创建整个板，只需清空内容并使用以下内容填充必要的内容即可：let specialSquares = {&nbsp; '3xW': [0, 7, 105],&nbsp; '3xL': [20, 76, 80],&nbsp; '2xW': [16, 32, 48, 64],&nbsp; '2xL': [3, 36, 45, 52, 92, 96, 108],&nbsp; 'CS': [112],};let boardSide = 15;$('.tile').html('_');Object.keys(specialSquares).forEach(squareName => {&nbsp; let tiles = specialSquares[squareName];&nbsp; tiles.forEach(tile => {&nbsp; &nbsp; let x = Math.floor(tile / boardSide);&nbsp; &nbsp; let y = tile % boardSide;&nbsp; &nbsp; $(`#tile-${x}-${y}`).html(squareName);&nbsp; })})要创建矩阵，我会这样：function createBoard() {&nbsp; let specialSquares = {&nbsp; &nbsp; '3xW': [0, 7, 105],&nbsp; &nbsp; '3xL': [20, 76, 80],&nbsp; &nbsp; '2xW': [16, 32, 48, 64],&nbsp; &nbsp; '2xL': [3, 36, 45, 52, 92, 96, 108],&nbsp; &nbsp; 'CT': [112],&nbsp; };&nbsp; let boardSide = 15;&nbsp; this.board = Array(boardSide).fill(0).map(() => Array(boardSide).fill('_'));&nbsp; Object.keys(specialSquares).forEach(squareName => {&nbsp; &nbsp; let tiles = specialSquares[squareName];&nbsp; &nbsp; tiles.forEach(tile => {&nbsp; &nbsp; &nbsp; let x = Math.floor(tile / boardSide);&nbsp; &nbsp; &nbsp; let y = tile % boardSide;&nbsp; &nbsp; &nbsp; this.board[x][y] = squareName;&nbsp; &nbsp; });&nbsp; })}

Answer 2

我采取了一些自由措施并重新排列了您的内容specialSquares，以便更轻松地从循环中进行访问。看看这个：let buildBoard = () => {&nbsp; &nbsp;let height = 14;&nbsp; &nbsp;let width = 14;&nbsp; &nbsp;let board_container = $("#board_container");&nbsp; &nbsp;let counter = 0;&nbsp; &nbsp;for (let i=0; i < height; i++) {&nbsp; &nbsp; &nbsp; if ($(board_container).html()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(board_container).html($(board_container).html()+"<br>");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; for (let j = 0; j < width; j++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//console.log(i, j);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let boardValue = specialSquares[counter];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (boardValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(board_container).append(`<div id='cell_${counter}' class='non_blank'>${boardValue}</div>`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(board_container).append(`<div id='cell_${counter}'>${counter}</div>`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;counter++;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}}let specialSquares = {&nbsp; &nbsp;0: '3xW',7: '3xW',105: '3xW',&nbsp; &nbsp;20: '3xL',76: '3xL',80: '3xL',&nbsp; &nbsp;16: '2xW',32: '2xW',48: '2xW',64: '2xW',&nbsp; &nbsp;3: '2xL', 36: '2xL', 45: '2xL', 52: '2xL', 92: '2xL', 96: '2xL', 108: '2xL',&nbsp; &nbsp;112: 'CS'}buildBoard();这里有一个 JSFiddle：https ://jsfiddle.net/dbrc12vt/3/您没有提供 CSS，因此格式不太漂亮。但只要您认为合适，就可以插入您自己的。另请注意，每个单元格都有一个与其索引相对应的 ID，例如cell_112。您现在可以将它们用作后续选择器操作的参考。