JavaScriptのinnerHTMLを使って９×９の表を作る

JavaScriptのinnerHTLを使って、９×９の表を作ろう思い以下のコードを書きました。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>ナンプレ解析</title>
6    <link rel="stylesheet" href="styles.css">
7  </head>
8  <body>
9    <table>
10      <tbody id="table">
11      </tbody>
12    </table>
13    <div id="btn" class="inactive">入力完了</div>
14    <script src="main.js"></script>
15  </body>
16</html>
17

JavaScript
1(function(){
2  "use script";
3
4  var table = document.getElementById("table");
5
6  //  表作成
7  var x;
8  var y;
9
10  for(y = 1; y < 10; y++){
11    table.innerHTML += "<tr>";
12    for(x = 1; x < 10; x++){
13      table.innerHTML += "<td>"+y+"_"+x+"</td>";
14    }
15    table.innerHTML += "</tr>";
16  }
17
18
19})();

想像していた表は

このようになると想像していたんですが実際は、
１＿１
１＿２
１＿３
・
・
・
と下方向に進んでいくコードが出来上がってしまいました。

表のようになるようにアドバイスをください。

行動規範の内容に同意します

回答2件

innerHTMLはhtmlを都度解釈するため、<tr>を追記した時点で</tr>が補完されているものと思います。
また、<td>を挿入した際には、対応する<tr>がなくなっているため、<tr>が再度補完され、結果として縦1列の表になったのかと思われます。
対処としては、kei344さんのご回答にもあるように、htmlを組み立ててから、最後にinnerHTMLに設定するといった対応が考えられます。
この方が描画の無駄もないため速く処理することもできます。

また、コード中の"use script";ですが、"use strict";を宣言しようとしたものでしょうか。
詳しくないのでそのような宣言があるのかもしれませんが、一応確認とさせて頂きました。

投稿2017/11/24 15:18

編集2017/11/24 15:19

退会済みユーザー

総合スコア0

退会済みユーザー

2017/11/24 15:26

返信ありがとうございます。 HTMLを組み立てるとは、変数に一度代入してから、一行づつ描画していく方法ですか use strictの指摘ありがとうございます。スペル間違ってました。

退会済みユーザー

2017/11/24 15:39 編集

html要素となる文字列を変数に格納していくことを、htmlを組み立てると表現しました。 1行ずつ行ってもよいですが、描画（レンダリング）はまとめて行った方が効率がよいので、途中経過が必要等でない限りは、最後に1回実行するような形とした方がよいものと思います。

退会済みユーザー

2017/11/24 15:40

ありがとうございます。勉強になりました。

行動規範の内容に同意します

ベストアンサー

JavaScript
1(function(){
2  "use script";
3
4  var table = document.getElementById("table");
5
6  //  表作成
7  var x;
8  var y;
9  var d = '';
10
11  for(y = 1; y < 10; y++){
12    d += "<tr>";
13    for(x = 1; x < 10; x++){
14      d += "<td>"+y+"_"+x+"</td>";
15    }
16    d += "</tr>";
17  }
18  table.innerHTML = d;
19
20})();
21```**動くサンプル：**[https://jsfiddle.net/eeqh40ts/1/](https://jsfiddle.net/eeqh40ts/1/)