棋盤與行和列

Question

我找了答案，我找不到它。 所以我的問題是我怎樣才能使用js製作棋盤格。當我打開網站時，它應該告訴用戶他們想要的行數和列數，所以如果我說5行和5列，它應該用這個來生成棋盤格。我應該使用for循環，如果這樣做。 繼承人我的代碼我工作。

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

Answer 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); 
    } 
}