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

DOM ＞ テーブル

概要

　閲覧数:521 　投稿日: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/4/30 15:17 更新
週間人気ページランキング ／ 4-23 → 4-29
順位 ページタイトル抜粋 アクセス数
1 クリックした要素のid名を取得 ／ クリックした要素のクラス名を取得 | クリック(イベント) 10
2 JavaScriptコード 3
2 クリックした要素を取得 | クリック(イベント) 3
3 spilitで、指定した内容で分割できないときの戻り値は、["対象文字列"] | 文字列(テキスト処理) 2
3 json 文字列を eval 関数(セキュリティリスクあり)を使ってオブジェクトへ変換 | JSON 2
3 json 文字列を JSON.parse() メソッド(推奨)を使ってオブジェクトへ変換 | JSON 2
3 配列からランダムに値を取得 | 配列 2
3 正規表現(テキスト処理) カテゴリー 2
3 数値のゼロ埋め（桁を揃える） | テキスト処理 2
3 三項演算子の入れ子 | 三項演算子(演算子) 2
3 eval | タグ毎エントリー一覧 2
3 「二つ置き」毎に結果が7増加するよう数字を表示 | 算術演算子(演算子) 2
3 firstChild | タグ毎エントリー一覧 2
3 replace | タグ毎エントリー一覧 2
3 現在日時を取得後、整形表示 | 日付および時刻関連 2
3 t | タグ毎エントリー一覧 2
3 n | タグ毎エントリー一覧 2
3 location | タグ毎エントリー一覧 2
3 p | タグ毎エントリー一覧 2
3 oncontextmenu | タグ毎エントリー一覧 2
2025/4/30 1:02 更新