More than 3 years have passed since last update.

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

Last updated at 2020-02-13Posted at 2020-02-12

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;
      }