JavaScript で for 文をまわして市松模様を作ってみた

JavaScript で for 文をまわして市松模様を作ってみました。

ソースコードは次の通りです。

<div id="checkered_pattern"></div>
@charset "UTF-8";

table {
    border: solid 2px black;
    width: auto; /* WordPress でやる場合はあったほうが良い */
    margin-left: auto;
    margin-right: auto;
}

table td {
    width: 20px;
    height: 20px;
    border: none;
    padding: 0;
}

.white {
    background: beige;
}

.black {
    background: brown;
}
const N = 8;
let output_html = '<table>';
for (let i = 0; i < N ; i++) {
    output_html += '<tr>';
    for (let j = 0; j < N ; j++) {
        if ((i + j) % 2 == 0) {
            output_html += '<td class=\"white\"></td>';
        } else {
            output_html += '<td class=\"black\"></td>';
        }
    }
    output_html += '</tr>';
}
output_html += '</table>';
document.getElementById("checkered_pattern").innerHTML = output_html;

コメント

タイトルとURLをコピーしました