[jQuery]appendToでテーブルに値を動的にする

2022年9月25日

環境
Windows 11 Pro 64bit
jquery 3.6.0

構文
const 変数名 = $(“<table><tbody>");
$(子要素のタグ)..appendTo(変数名);
appendToを使って、子要素の最後に移動します。

$(セレクター名).append(変数名);
appendを使って、指定の要素の子要素の最後に追加します。1

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: collapse;
    background-color:yellow;
    width: 30%;
  }
  table td {
    border: 1px solid;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    
    const city = ["東京","大阪","横浜"];
    const cft = $("<table><tbody>");
    for (let i = 0; i < 2; i++) {
      $("<tr><td>" + parseInt(i+40) + 
        "</td><td>" + city[i] + "</td></tr>").appendTo(cft);
    }
    $("</tbody></table>").appendTo(cft);
    $("#cft").append(cft);
  });
</script>
</head>
<body>

<div id="cft"></div>

</body>
</html>

実行結果
2行2列のテーブルを作成します。背景色は「yellowになります。

jQuery

Posted by arkgame

関連記事: