jQuery appendメソッドを使ってテーブルに行を追加するサンプル

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1

構文
$('テーブルのクラス名’).append('<tr><td>’ + 値1 + '</td><td>値2</td></tr>’);
appendメソッドを使ってテーブルを追加します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){ 

    //tr要素をカウント
    var cnt= $('.cft tr').length;
    
    $('#btnchg').click(function(e){
    //テーブルを追加する
      $('.cft').append('<tr><td>' + (++cnt) + '</td><td>項目</td></tr>');
    });

})
</script>
</head>
<body>
  <table  style="width:60%" class="cft">
    <tr>
      <td>1</td>
      <td>東京</td>    
    </tr>
    <tr>
      <td>2</td>
      <td>大阪</td>
    </tr>
  </table>
  <p>
  <button id="btnchg" >実行</button></p>
</body>
</html>

実行結果
「実行」ボタンを押すと、テーブルを追加します。

jQuery

Posted by arkgame