チェッカーボードの座標を作成する最も良い方法

Question

チェッカーの座標を作成したいと思います。それらを作成するより良い方法はありますか？

let div = document.getElementById("example"); 
 
for (let i = 1; i < 9; i++) { 
 
    const xAxis = ["A", "B", "C", "D", "E", "F", "G", "H"]; 
 
    for (let j = 1; j < 9; j++) { 
 
    div.innerHTML += xAxis[i - 1] + "" + j + ","; 
 
    } 
 
}

<div id="example"> 
 

 
</div>

Answer 1

私はあなたのアレイ上Array.forEachを使用して、列のレイアウトを強制するために、テーブルを使用していると考えることができる唯一の事。

CSS 3スタイリングのためのnth-child？

var table = document.body.appendChild(document.createElement("table")); 
 
["A", "B", "C", "D", "E", "F", "G", "H"] 
 
.forEach(function(letter) { 
 
    var tr = table.appendChild(document.createElement("tr")); 
 
    for (var num = 1; num <= 9; num++) { 
 
    var td = tr.appendChild(document.createElement("td")); 
 
    td.innerHTML = letter + num; 
 
    } 
 
});

tr:nth-child(even) td:nth-child(even) { 
 
    background: red; 
 
} 
 

 
tr:nth-child(odd) td:nth-child(odd) { 
 
    background: red; 
 
}