テーブルタグと内容を作成して追加 ／ for

DOM ＞ テーブル

概要

　閲覧数:585 　投稿日:2014-11-06 　更新日:2014-11-14 　

テーブルタグと内容を作成して追加
・for使用

コード

<div id="result"></div>

<script>
  var thData = [
  '見出1',
  '見出2',
  '見出3'
  ];

  var table = document.createElement('table'),
      thead = table.createTHead(),
      tr = document.createElement("tr");

  for(var i=0; i<thData.length; i++){
    var th = document.createElement("th");
    th.innerHTML = thData[i]
    tr.appendChild(th);
  }

  thead.appendChild(tr);
  table.appendChild(thead);
  document.getElementById('result').appendChild(table);
</script>


結果

<div id="result">
  <table>
    <thead>
      <tr>
        <th>見出1</th><th>見出2</th><th>見出3</th>
      </tr>
    </thead>
  </table>
</div>


タグ


for　


リンク


appendChildとinnerHTMLを短く


テーブルタグと内容を作成して追加 ／ insertRow



類似度ページランキング
順位 ページタイトル抜粋 ％
1 テーブルタグと内容を作成して追加 ／ for 95
2 テーブルタグと内容を作成して追加 ／ insertRow 80
3 オブジェクトのキーとして、変数の値を使用 29
4 現在日時を、dateオブジェクトとして取得 23
5 オブジェクトのキーとして、配列からランダムな値を取得して使用 23
6 検索文字列を使用して文字列内のテキストを置換 23
7 オブジェクト内配列より、重複しない値を取得して、新たな配列を生成 22
8 オブジェクトを生成し、アクセス 22
9 配列生成後、全ての中身を順番に、別の関数へ引数として渡す 20
10 文字列を正規表現で置換。「最初にマッチした内容のみ置換」する場合と、「マッチした内容全てを置換」する場合 19
11 json 文字列を eval 関数(セキュリティリスクあり)を使ってオブジェクトへ変換 18
12 json 文字列を JSON.parse() メソッド(推奨)を使ってオブジェクトへ変換 18
13 配列をネストしたオブジェクトを生成し、アクセス 18
14 HTMLからタイトルを取得 17
15 文字列内のテキストを正規表現で置換。その際、エスケープ使用 16
16 オブジェクトから JSON へ変換。JSON.stringify() メソッドを利用 16
17 クリックした要素のid名を取得 ／ クリックした要素のクラス名を取得 14
18 spilitで、指定した内容で分割できないときの戻り値は、["対象文字列"] 13
19 配列を、アルファベット順(文字コード順)に並べ替え 13
20 jQueryセレクタ 13
2025/11/05 9:27 更新
週間人気ページランキング ／ 10-29 → 11-4
順位 ページタイトル抜粋 アクセス数
1 クリックした要素のid名を取得 ／ クリックした要素のクラス名を取得 | クリック(イベント) 5
2 オブジェクト内配列より、重複しない値を取得して、新たな配列を生成 | オブジェクト 1
2 spilit | タグ毎エントリー一覧 1
2 firstChild | タグ毎エントリー一覧 1
2 JavaScriptコード 1
2 json 文字列を JSON.parse() メソッド(推奨)を使ってオブジェクトへ変換 | JSON 1
2 ログイン 1
2 replace | タグ毎エントリー一覧 1
2 ゲストコメント一覧ページ 1
2 String | タグ毎エントリー一覧 1
2 RegExp | タグ毎エントリー一覧 1
2 算術演算子(演算子) カテゴリー 1
2 valueOf | タグ毎エントリー一覧 1
2 正規表現(テキスト処理) カテゴリー 1
2 三項演算子(演算子) カテゴリー 1
2025/11/5 1:02 更新