JavaScript　for文で掛け算九九の表を作ってみる - 猫と遊ぶ　見習いプログラマーの備忘録

繰り返しの処理、for文をもう一つ。
二重ループを作成してみようの回。

二重ループとは文字の通り、for文の中にまたfor文があること。

イメージを描いてみた。

f:id:msm20-chocolateee:20180903165530p:plain

イメージはこんな感じ。

この入れ子のような状態を「ネスト」と言ったりする。
ネストっていうとカッコイイかも知れないけど、
多ければ多いほど、かっこわるい。
見にくい、読みにくい、処理が多い、時間がかかるってこと。
今はシンプルなのが好まれるらしい～

ってことで、すこーし複雑になりますが、
とりあえず九九表を作ってみます！

作っていくうちにわかってきたらいいなという願いを込めて…

そんな感じで参考文献（以下に記載）を手元に置きながら
九九の表を作成してみた。

f:id:msm20-chocolateee:20180903174836p:plain

このプログラムのソースコードがこちら。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>for for</title>
  <style>
    table {
      border-collapse: collapse;
    }

    td {
      width: 60px;
      height: 50px;
      border: solid 1px;
      text-align: center;
    }
  </style>
</head>

<body>
  <table id="kukuTable"></table>
  <script>
    var tbl = document.getElementById("kukuTable");
    //よこに1～9
    for (i = 1; i <= 9; i++) {
      //insert〇〇で-1だと最後に追加するって意味らしい
      var yoko = tbl.insertRow(-1);
      //2で割ってあまりが1だったら黄色
      if (i % 2 == 1) yoko.style.backgroundColor = "#FFD700";
      //たてに1～9
      for (var a = 1; a <= 9; a++) {
        var tate = yoko.insertCell(-1);
        //掛け算の結果（たて×よこ）
        var kake = i * a;
        tate.textContent = kake;
      }
    }
  </script>
</body>

</html>