JavaScript でかけ算九九の表を作ってみた

タイトルにある通り、JavaScript でかけ算九九の表を作ってみました。

HTML、CSS、JavaScript は次の通りです。(このサイトは WordPress テーマの Cocoon を使っているため、CSS についてはお使いの環境によって修正が必要となるかも知れません。)

<div id="kuku_table"></div>
#kuku_table table {
    border: solid 2px black;
}

table th, table td {
    width: 10%;
}

th.operand {
    background: orange;
}

td.num {
    text-align: right;
}
const N = 9;
var output_html = '<table><tr><th class=\"operand\">×</th>';
for (let i = 1; i <= N; i++) {
    output_html += ('<th class=\"operand\">' + i + '</th>');
}
for (let i = 1; i <= N ; i++) {
    output_html += ('<tr><th class=\"operand\">' + i + '</th>');
    for (let j = 1; j <= N ; j++) {
        output_html += ('<td class=\"num\">' + (i * j) + '</td>');
    }
    output_html += '</tr>';
}
output_html += '</table>';
document.getElementById("kuku_table").innerHTML = output_html;

コメント

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