JavaScriptでHTMLに表示するtableを作る！

完成形はこんな感じ
codepenから直接コード見られます。

tableを作るのに使う要素

HTML

<body></body>
<table></table>

JavaScript

document.write('xx')
- <tr></tr>
- <th></th>
- <td></td>
for(var hoge=1; hoge <= 9; hoge++){document.write('<xx>'+ hoge +' </xx>');}

※ '<xx></xx>'は繰り返すtr,th,tdが入ります。
※ hogeは仮の名前です。特に意味のないclassや変数名をつける時使います。

実際のコード

そのコードでどのようなことがしたいのかがわかるよう、かなりコード内で説明してます。

先に備考
* <table></table>のタグはあえてscriptタグに入れていません。<table><script>...<script></table>こんな構成
* i,j,kは変数名。仮の文字なので実行したいことがわかればいい
* xは横の行で計算をしていることをわかりやすくするため仮に置いている文字
* yは縦の列で計算をしていることをわかりやすくするため仮に置いている文字

HTMLとJavaScript

  <body>
  <div class="container">
    <h1>九九の表を作る</h1>
    <table class="border" border="1">
      <script>
        //xの行を作る
        document.write('<tr>');

        //何も掛け算をしない空白のthを作成
        document.write('<th></th>');

        //xの行を記述するため、1から9の数字を繰り返しHTMLに記述する
        for(var i=1; i <= 9; i++){
          document.write('<th>'+ i +' x</th>');
        }

        //ここでxの行を閉じる
        document.write('</tr>');

        //ここまでxの行

        //jの列を作る
        document.write('<tr>');

        //jの列を記述するため、1から9の数字を繰り返しHTMLに記述する
        for(var j=1; j <= 9; j++){
          document.write('<th>' + j + 'y</th>');

        //j*kを繰り返すことで、計算結果をtdタグの中に表示する
          for(var k=1; k <=9; k++){
            document.write('<td>'+ j*k +'</td>');
          }
        //ここでjの行を閉じる
          document.write('</tr>');
        }
      </script>
    </table>
  </div>
  </body>

CSS

    @charset 'utf-8';

    /*layout
    -----------------------------------*/
    .container{
      margin: 0 auto;
      padding:0;
      box-sizing:border-box;
      background-color:rgba(255, 255, 255, 0.7);}
      .border{
        border-collapse: collapse;
        border: 1px solid #333;
      }
      th,td{
        width: 40px;
        height: 40px;
        text-align: center;
      }
      th{
        background-color:#ff525f;
      }
      td{
        background-color:#fffffb;
      }

ちょっと解説？

1番目のfor文でやってること

この行を作ってる

2,3番目のfor文でやってること

要はこの行の掛け算（ j*k ）を9回繰り返して下の画像のようにしてる

おわりに

雰囲気for文を使った掛け算のやり方がわかったでしょうか、、？

htmlでテーブルを作ろうとすると逆にtrの中にth,tdをどのように配置すればいいのかわからないことがあるので繰り返しのテーブルを作る際にはJavaScriptの方がわかりやすいこともあるかもしれないですね！

日常でこの九九表を作ることに意味は感じませんが、for文の中にfor文があるという時の練習にはなるのではないでしょうか。。

私もよくわかってませんが、何かの参考になれば幸いです！(雰囲気なので間違っていたりもっといい伝え方があれば教えていただきたいです、、ごめんなさい、、、)

今後、計算結果で偶数の時は色を変える、、の処理もいつか記事にしたいと思います

お疲れ様でした！

【初心者向け】JavaScriptのfor文でHTMLに表示する九九表を作る！