jQuery appendToとappendメソッドを使ってテーブルを作成し値を動的にセットするサンプル

2023年2月1日

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122

書式
1.$(“要素2").appendTo(要素1);
appendToを使って指定子要素の最後に移動します。

2.$(“セレクター名").append(要素)
appendを使って指定の要素の子要素の最後に追加します。

3.ボタンのイベントの定義
$(“#ボタンのID名").click(function(){処理コード})

使用例

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

//ボタンのイベント

$("#btnchk").click(function(){

//配列の定義

const city= ["東京","大阪","福岡"];

const cft = $("<table><tbody>");

for (let i = 0; i < 2; i++) {

$("<tr><td>" + parseInt(i+100) +

"</td><td>" + city[i] + "</td></tr>").appendTo(cft);

}

// 子要素の最後に移動する

$("</tbody></table>").appendTo(cft);

// 指定の要素の子要素の最後に追加する

$("#show").append(cft);

});

</script>

<style>

table {

border-collapse: collapse;

width: 40%;

}

table td {

border: 1px solid;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function(){ //ボタンのイベント $("#btnchk").click(function(){ //配列の定義 const city= ["東京","大阪","福岡"]; const cft = $("<table><tbody>"); // for (let i = 0; i < 2; i++) { $("<tr><td>" + parseInt(i+100) + "</td><td>" + city[i] + "</td></tr>").appendTo(cft); } // 子要素の最後に移動する $("</tbody></table>").appendTo(cft); // 指定の要素の子要素の最後に追加する $("#show").append(cft); }); }); </script> <style> table { border-collapse: collapse; width: 40%; } table td { border: 1px solid; } </style> </head> <body> <div id="show"></div> <p><button id="btnchk">追加</button></p> </body> </html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
  //ボタンのイベント
  $("#btnchk").click(function(){
   //配列の定義
    const city= ["東京","大阪","福岡"];
    const cft = $("<table><tbody>");
    //
    for (let i = 0; i < 2; i++) {
      $("<tr><td>" + parseInt(i+100) + 
        "</td><td>" + city[i] + "</td></tr>").appendTo(cft);
    }
    // 子要素の最後に移動する
    $("</tbody></table>").appendTo(cft);
    // 指定の要素の子要素の最後に追加する
    $("#show").append(cft);
     
  });
});
</script>
<style>
  table {
    border-collapse: collapse;
    width: 40%;
  }
  table td {
    border: 1px solid;
  }
</style>
</head>
<body>


<div id="show"></div>
<p><button id="btnchk">追加</button></p>
</body>
</html>

実行結果
ボタン「追加」を押すと、２行2列のテーブルを作成します。
100 東京
101 大阪

jQuery

Posted by arkgame

関連投稿: