JavaScriptで九九計算（console.table テーブル表示）

目次

九九をconsole.tableで表示する

コンソールに以下の様な出力が行われます。

ソースコードは以下です。

<button type="button" onclick="consoleAction()">コンソール表示</button>

<script>
function consoleAction(){
    var arrayLeft = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var arrayRight = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var result = [];
    for (var i = 0; i < arrayLeft.length; i++ ) {
        var row =[];
        for (var j = 0; j < arrayRight.length; j++) {
            row.push(arrayLeft[i] * arrayRight[j]);
        }
        result.push(row);
    }
    console.table(result);
}
</script>

以下のボタンを押下する事で、コンソールに出力されるので、お試しください。

コンソール表示

画面上にTableタグで九九を表示する

ソースコードは以下です。

<table class="target"></table>

<script>
kuku()
function kuku(){
    const x = 9;
    const y = 9;
    var target = document.querySelector(".target");
    target.innerHTML = "";
    var tr = document.createElement("tr");
    target.appendChild(tr);
    for(var i=0;i<=x; i++){
        var th = document.createElement("th");
        tr.appendChild(th);
        if ( i === 0 ) { continue; }
        th.textContent = i;
    }

    for(var i=1; i<=x; i++){
        var tr = document.createElement("tr");
        target.appendChild(tr);
        var th = document.createElement("th");
        tr.appendChild(th);
        th.textContent = i;
        for(var j=1; j<=y; j++){
            var td = document.createElement("td");
            tr.appendChild(td);
            td.textContent = (i*j);
        }
    }
}
</script>

画面上には以下の様に表示されます。