【超便利】jQueryでテーブル行を追加・編集・削除する方法

2024-04-05

jQueryでテーブル行を追加する方法

jQueryは、JavaScriptを簡潔に記述できるライブラリです。このチュートリアルでは、jQueryを使用してHTMLテーブルに行を追加する方法について説明します。

前提条件

HTMLファイル
JavaScriptファイル
jQueryライブラリ

ステップ

HTMLファイルにテーブルを追加する

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中 太郎</td>
      <td>20</td>
    </tr>
    <tr>
      <td>佐藤 花子</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

JavaScriptファイルにjQueryライブラリを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQueryを使用してテーブル行を追加する

$(function() {
  // テーブルの最後の行を取得
  var lastRow = $('table tbody tr:last');

  // 新しい行を作成
  var newRow = $('<tr><td></td><td></td></tr>');

  // 新しい行にデータを入力
  newRow.find('td:first').text('山田 健太');
  newRow.find('td:last').text('30');

  // 新しい行を最後の行に追加
  newRow.insertAfter(lastRow);
});

コード解説

$(function() { ... })：jQueryのreadyイベントハンドラ。DOMContentLoadedイベントが発生した後に実行されます。
$('table tbody tr:last')：テーブルの最後の行を取得します。
$('<tr><td></td><td></td></tr>')：新しい行を作成します。
newRow.find('td:first').text('山田健太')：新しい行の最初のセルに「山田健太」というテキストを設定します。
newRow.insertAfter(lastRow)：新しい行を最後の行に追加します。

実行結果

上記のコードを実行すると、テーブルに「山田健太」「30」というデータを含む新しい行が追加されます。

補足

上記のコードは、シンプルな例です。実際のアプリケーションでは、より複雑な処理が必要になる場合があります。
jQueryには、テーブル操作に関するさまざまなメソッドがあります。詳細は、jQuery APIドキュメントを参照してください。

上記のコードは、JavaScriptファイルがHTMLファイルと同じディレクトリにあることを前提としています。
JavaScriptファイルが別のディレクトリにある場合は、src属性に正しいパスを指定する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでテーブル行を追加する</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>名前</th>
        <th>年齢</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>田中 太郎</td>
        <td>20</td>
      </tr>
      <tr>
        <td>佐藤 花子</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
  $(function() {
    // テーブルの最後の行を取得
    var lastRow = $('table tbody tr:last');

    // 新しい行を作成
    var newRow = $('<tr><td></td><td></td></tr>');

    // 新しい行にデータを入力
    newRow.find('td:first').text('山田 健太');
    newRow.find('td:last').text('30');

    // 新しい行を最後の行に追加
    newRow.insertAfter(lastRow);
  });
  </script>
</body>
</html>

実行方法

上記のコードをHTMLファイルとして保存します。
ブラウザでファイルを開きます。

実行結果

jQueryでテーブル行を追加する他の方法

$(function() {
  // 新しい行を作成
  var newRow = $('<tr><td>山田 健太</td><td>30</td></tr>');

  // 新しい行をテーブルの末尾に追加
  $('table tbody').append(newRow);
});

append()メソッドは、指定された要素の末尾に新しい要素を追加します。上記のコードでは、$('table tbody') に newRow を追加しています。

$(function() {
  // テーブルの最後の行を取得
  var lastRow = $('table tbody tr:last');

  // 新しい行を作成
  var newRow = $('<tr><td>山田 健太</td><td>30</td></tr>');

  // 新しい行を最後の行の前に追加
  newRow.insertBefore(lastRow);
});

$(function() {
  // テーブルの最後の行を取得
  var lastRow = $('table tbody tr:last');

  // 新しい行を作成
  var newRow = $('<tr><td>山田 健太</td><td>30</td></tr>');

  // 新しい行を最後の行の後に追加
  newRow.insertAfter(lastRow);
});

$(function() {
  // テーブルのtbody要素を取得
  var tbody = $('table tbody');

  // 新しい行のHTMLコード
  var newRowHtml = '<tr><td>山田 健太</td><td>30</td></tr>';

  // 新しい行をtbody要素に追加
  tbody.html(tbody.html() + newRowHtml);
});

どの方法を使うべきかは、状況によって異なります。以下のような点を考慮する必要があります。