jqueryテーブルはデータ行を動的に削除します

Web アプリケーションを開発する場合、データ テーブルは一般的なコンポーネントであり、通常はデータを表示するために使用されます。ただし、テーブルから特定のデータ行を削除する必要がある場合があり、この機能を実現するには jQuery を使用すると非常に便利です。

jQuery では、通常、remove() メソッドを使用して DOM 要素を削除します。したがって、テーブル内のデータ行を削除する場合は、最初にこの行の DOM 要素を取得し、次に remove() メソッドを使用してテーブルから削除する必要があります。

まず、テーブル内のデータ行を取得する方法を見てみましょう。各行に削除ボタンがあり、ユーザーが削除ボタンをクリックしたときにテーブルからその行を削除する必要があるテーブルがあるとします。サンプル テーブルの HTML コードは次のとおりです。

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>

このテーブルでは、各行に 3 つのセルが含まれており、最後のセルには「削除」という名前のボタンが含まれています。ここで、jQuery を使用して、各削除ボタンにクリック イベント ハンドラーを追加し、対応する行を削除できます。実装コードは次のとおりです。

$(document).ready(function() {
  // 添加点击事件处理程序
  $('.delete-row').click(function() {
    // 获取要删除的行
    var row = $(this).closest('tr');
    // 从表格中移除行
    row.remove();
  });
});

上記のコードでは、まず $() 関数を使用して、ドキュメントがロードされた後、「delete-row」という名前のすべてのボタンを検索します。各ボタンのクリック イベント ハンドラーを追加しました。ユーザーが削除ボタンをクリックすると、クリック イベントが発生し、コールバック関数が実行されます。

コールバック関数では、closest() メソッドを使用して、現在のボタンが配置されている行を検索し、その行を row 変数に保存します。次に、remove() メソッドを使用してテーブルから行を削除します。

closest() メソッドを使用しますが、最もよく一致する要素のみが検索されることに注意することが重要です。そのため、削除ボタンが行に直接含まれていない場合でも、セルまたは他の要素内で、正しい要素と一致するようにセレクターを変更する必要があります。

これは、jQuery を使用してテーブル内のデータ行を動的に削除する方法です。 Web アプリケーションを開発している場合、このアプローチを使用すると、ユーザーがデータを編集および管理しやすくなります。

以上がjqueryテーブルはデータ行を動的に削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。