「jQuery」appendとremoveでテーブルの行を追加、削除する

2022年2月25日

環境
jquery 3.6.0
Google Chrome　98.0.4758.102

書式
1.行を追加する
$('テーブルID名’).append('追加行内容’);
appendを使って行を追加します。
2.行を削除する
$('テーブルID名’).on(“click", “tr", function(event){
$(this).remove();
});
使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
    var idx = 1002;
  //　ボタンを押すと、行を追加
  $('#btnAdd').click(function(event){
    $('#tbinfo').append('<tr><td>' + (++idx) + '</td><td>福岡</td></tr>');
  });
 
  //行をクリックすると行削除される
  $('#tbinfo').on("click", "tr", function(event){
    $(this).remove();
  });
});
</script>
</head>
<body>
  <table id="tbinfo">
    <tr><td>1001</td><td>東京</td></tr>
    <tr><td>1002</td><td>大阪</td></tr>
  </table>
  <p><input type="button" id="btnAdd" value="行追加"></p>
</body>
</html>

結果
「行追加」ボタンを押すと、行「1003 福岡」を追加します。
行「1002 大阪」クリックで行「1002 大阪」削除を行います。

jQuery

Posted by arkgame