jqueryテーブルのクエリ関数の追加と削除-フロントエンドQ&A-php.cn

jqueryテーブルのクエリ関数の追加と削除

王林

リリース： 2023-05-11 21:43:06

オリジナル

890 人が閲覧しました

インターネット技術の継続的な発展に伴い、Web アプリケーションの重要性は日に日に増しています。テーブルは重要な情報表示ツールであり、さまざまな管理システムで一般的に使用されます。このプログラムでは、データを表示するためのテーブルが必要ですが、テーブルを追加、削除、変更、確認するための便利なツールも必要です。これにより、作業効率が大幅に向上します。この記事ではjQueryを使ってテーブルの追加・削除・変更・クエリ機能を実装する方法を紹介します。

まず、HTML テーブルが必要です。次の HTML コードを使用して、単純なテーブルを作成できます。

<table id="table-data">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
      <td><button class="delete">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
      <td><button class="delete">删除</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td><button class="delete">删除</button></td>
    </tr>
  </tbody>
</table>

ログイン後にコピー

次に、jQuery の依存関係を追加する必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

ログイン後にコピー

次に、追加、削除、変更、およびチェック機能の実装を開始できます。

関数の追加

関数をフォームに追加するには、ユーザーがデータを入力できるフォームが必要です。フォームは次の HTML コードを使用して作成できます。

<form id="form-data">
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" required>
  </div>
  <div>
    <label for="age">年龄：</label>
    <input type="number" id="age" required>
  </div>
  <button type="submit">添加</button>
</form>

ログイン後にコピー

次に、jQuery に次のコードを追加します。

$("#form-data").submit(function(e) {
  e.preventDefault();
  let name = $("#name").val();
  let age = $("#age").val();
  let newId = $("#table-data tbody tr:last-child td:first-child").text() + 1;
  let row = `<tr>
              <td>${newId}</td>
              <td>${name}</td>
              <td>${age}</td>
              <td><button class="delete">删除</button></td>
            </tr>`;
  $("#table-data tbody").append(row);
  $("#form-data")[0].reset();
});

ログイン後にコピー

まず、e.preventDefault() を使用して、ブラウザのデフォルトの送信動作を禁止します。次に、フォームから名前と年齢を取得し、最後の行の番号に基づいて新しい番号を生成します。次に、JQuery を使用して新しい行を動的に追加し、テーブルの末尾に追加します。最後に、reset() メソッドを呼び出して、フォームフィールドの値を空にリセットします。

これで、行関数が正常に追加されました。

削除関数

行を削除する関数を実装しましょう。以下に示すように、テーブルの HTML コードに削除ボタンを追加できます。

<td><button class="delete">删除</button></td>

ログイン後にコピー

次に、次の jQuery コードを使用して、データ行を削除する関数を実装できます。

$("tbody").on("click", ".delete", function() {
  if (confirm("确定删除这行数据吗？")) {
    $(this).closest("tr").remove();
  }
});

ログイン後にコピー

まず、.on() イベントリスナーを使用して .delete ボタンのクリックイベントをリッスンし、closest() を使用します。 メソッドは、テーブル行である最も近い祖先要素を取得し、remove() メソッドを使用して削除します。その前に、ユーザーが誤ってデータを削除しないように、confirm() メソッドを使用して、このデータ行を本当に削除するかどうかをユーザーに確認します。

変更関数

次に行データを変更する関数を実装します。同様に、テーブルの各行に「編集」ボタンを追加します。

<td><button class="edit">编辑</button></td>

ログイン後にコピー

次に、編集ボタンのクリックイベントリスナーを追加し、その中にフォームを作成して、以下に示すように元のデータをフォームに入力する必要があります。

$("tbody").on("click", ".edit", function() {
  let id = $(this).closest("tr").find("td:first-child").text();
  let name = $(this).closest("tr").find("td:nth-child(2)").text();
  let age = $(this).closest("tr").find("td:nth-child(3)").text();
  let form = `
    <form id="form-edit">
      <div>
        <label for="edit-name">姓名：</label>
        <input type="text" id="edit-name" value="${name}" required>
      </div>
      <div>
        <label for="edit-age">年龄：</label>
        <input type="number" id="edit-age" value="${age}" required>
      </div>
      <button type="submit">保存</button>
    </form>`;
  $(this).closest("tr").html(`
    <td>${id}</td>
    <td>${form}</td>
    <td></td>
    <td></td>
  `);
});

ログイン後にコピー

まず、closest() メソッドを使用して、現在の編集ボタンの祖先要素 (テーブル行) を取得し、find()## を使用します。 # セレクターを通じて先祖要素を取得するメソッド次に、行の最初のセル (つまり ID)、2 番目のセル (つまり、名前)、および 3 番目のセル (つまり、年齢) のデータが変数に格納されます。

次に、新しいフォームを作成し、フォームのフィールドに変数のデータを入力します。最後に、

html() メソッドを使用して、テーブルの行の内容をフォームの HTML コードに置き換えます。

保存操作については、次の jQuery コードを使用して実現できます。

$("tbody").on("submit", "#form-edit", function(e) {
  e.preventDefault();
  let name = $("#edit-name").val();
  let age = $("#edit-age").val();
  let id = $(this).closest("tr").find("td:first-child").text();
  $(this).closest("tr").html(`
    <td>${id}</td>
    <td>${name}</td>
    <td>${age}</td>
    <td>
      <button class="delete">删除</button>
      <button class="edit">编辑</button>
    </td>
  `);
});

ログイン後にコピー

まず、

closest() メソッドを使用して現在のフォームの祖先要素、つまりテーブル行を取得し、find()## を使用します。 # 行の ID を取得するメソッド。次に、html() メソッドを使用してフォームのデータをテーブル行に更新し、[削除] ボタンと [編集] ボタンを使用して行に再度追加します。最後に、reset() メソッドを使用して、フォームのフィールドを空にリセットできます。クエリ関数

最後に、簡単なクエリ関数を実装しましょう。ページにテキスト入力ボックスを追加し、jQuery を使用してテーブルデータをフィルタリングできます。次の HTML コードを使用してクエリバーを作成できます。

<form id="form-search">
  <input type="text" id="search-keyword" placeholder="请输入姓名搜索" required>
  <button type="submit">查询</button>
</form>

ログイン後にコピー

次に、次の jQuery コードを使用してクエリ関数を実装します。

$("#form-search").submit(function(e) {
  e.preventDefault();
  let keyword = $("#search-keyword").val();
  $("tbody tr").hide();
  $("tbody tr:contains('" + keyword + "')").show();
});

ログイン後にコピー

まず、

.submit()

メソッドを使用して送信イベントリスナーをフォームに追加し、e.preventDefault() を使用してデフォルトを抑制します。行動。次に、クエリ列からキーワードを取得し、hide() メソッドを使用してテーブルのすべての行を非表示にします。最後に、:contains() セレクターを使用してキーワードに基づいて表示する必要がある行をフィルターし、show() メソッドを使用してこれらの行を表示します。この時点で、基本的な jQuery テーブルの追加、削除、変更、クエリ関数が実装されました。この方法により、ユーザーはテーブルデータの追加、削除、変更、クエリを簡単に行うことができ、作業効率が大幅に向上します。

以上がjqueryテーブルのクエリ関数の追加と削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。