具有行和列的棋盘答案

【问题标题】：Checkerboard with row and columns具有行和列的棋盘
【发布时间】：2017-06-21 06:53:19
【问题描述】：

我寻找答案，但我一无所获。所以我的问题是如何仅使用 js 制作棋盘格。当我打开网站时，它应该询问用户他们想要多少行和列，所以如果我说 5 行和 5 列，它应该生成一个棋盘格。我应该为此使用 for 循环和 if。这是我编写的代码。

  <script type="text/javascript">

      var row = prompt("Rows?", 10);
      row = parseInt(row);
      var column = prompt("Columns?", 10);
      column = parseInt(column);

      for(var i= 1;i<=column;i++)
      {
        for(var p= 1;p<=row;p++)
        {
          if(p % 2 == 0)
          {
            document.write(' <img src="schwarz.png" ' + "<br />");

        {

          document.write(' <img src="weiss.png" ' + "<br />");
        }
      }
    }
  }
  </script>

【问题讨论】：

标签： javascript for-loop if-statement

【解决方案1】：

您的代码唯一真正的问题是您没有将 'float: left' 应用于元素。此外，使用 'clear: both' 使元素换行。这是一个例子。

var rows = prompt('Rows?', 10);
var cols = prompt('Columns?', 10);

var templateBlock = '<div style="width: 50px; height: 50px; float: left; background-color: $COLOR$;""></div>';

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        var template = templateBlock.replace('$COLOR$', ((i + j) % 2) ? 'white' : 'black');

        if (j == 0)
            template = template.replace('style="', 'style="clear: both; ');

        document.write(template);
    }
}

【讨论】：