jQuery テーブルを作成するサンプル

jQueryでテーブルを作成するサンプルです。

サンプル	目的
	テーブルを作成する
	値を動的にする

目的

jQueryでテーブルを作成し値を動的にセットします。

テーブルを作成する

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }
  table td {
    border: 1px solid;
  }
</style>
<div id="div1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    const table1 = $("<table><tbody>");
    for (let i = 0; i < 3; i++) {
      $("<tr><td>101</td><td>102</td><td>103</td></tr>").appendTo(table1);
    }
    $("</tbody></table>").appendTo(table1);
    $("#div1").append(table1);
  });
</script>

appendToは、子要素の最後に移動します。
appendは、指定の要素の子要素の最後に追加します。10行目のdviに追加しています。

値を動的にする

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }
  table td {
    border: 1px solid;
  }
</style>
<div id="div1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    const color = ["赤","黄","青"];
    const table1 = $("<table><tbody>");
    for (let i = 0; i < 3; i++) {
      $("<tr><td>" + parseInt(i+100) + 
        "</td><td>" + parseInt(i+200) + 
        "</td><td>" + color[i] + "</td></tr>").appendTo(table1);
    }
    $("</tbody></table>").appendTo(table1);
    $("#div1").append(table1);
  });
</script>

14行目は、配列です。
17～19行目は、数値の計算と配列の値を表示しています。