绘制 5x5 棋盘 - Javascript答案

【问题标题】：Drawing 5x5 chess board - Javascript绘制 5x5 棋盘 - Javascript
【发布时间】：2020-02-12 03:25:54
【问题描述】：

我正在尝试在一个站点上绘制一个 5x5 棋盘，我得到了单元格，但它们并不是每 5 个单元格就开始换行...

画板代码：

// Drawing the board
class Board {
        draw(el){
            let tile = "<div class='tile'>";

            for (let row = 0; row < 5; row++) {
                for (let col = 0; col < 5; col++) {
                    let cellType = tile;
                    el.innerHTML += cellType;
                }
            }
        }
    }

    let b = new Board();
    b.draw(document.getElementById("board"));

查看http://klaslokaalmaker.nl的完整代码

【问题讨论】：

更好的方法是使用表格
class='tile'关联的样式有哪些？（您的问题必须完全独立。）
嗯，你需要一些 CSS。我建议使用 CSS Grid，但对于初学者来说可能会很复杂。从这里获取提示：jsfiddle.net/ldong/o4bu6q5r
请避免链接到代码。你能在这里展示正在使用的css吗？这将极大地影响董事会。
请参阅here 了解 8x8 棋盘的工作示例。而here 是包含棋子的。

标签： javascript

【解决方案1】：

修改您的样式表，以便将宽度和高度从 div 移动到 tile 类。否则，您也将板设置为平铺大小。

div {
  border: 2px solid black;
  float: left;
  background:#fff;
  color:#000;
  margin:0 -1px -1px 0;
}


div:hover {
  opacity:0.8;
}

.tile {
  background: #E7A56B; 
  width:70px;
  height:70px;
}

在每一行之后添加一个新的换行符来分隔每一行。

class Board {
  draw(el){
    let tile = "<div class='tile'/>";

    for (let row = 0; row < 5; row++) {
      for (let col = 0; col < 5; col++) {
        let cellType = tile;
        el.innerHTML += cellType;
      }
      el.innerHTML += "<br/>"
    }
  }
}

let b = new Board();
b.draw(document.getElementById("board"));

【讨论】：