jquery表格增刪該查功能

隨著網路科技的不斷發展，網頁應用的重要性日益增加。而表格是重要的資訊展示工具，常用於各種管理系統。在我們的程式中需要一個表格來展示數據，同時也需要一個方便的工具來對表格進行增刪改查的操作，這樣可以大大提高我們的工作效率。本文將介紹如何借助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）、第二個儲存格（即姓名）和第三個儲存格（即年齡）中的數據，然後將其儲存到變數中。

接著，我們建立一個新的表單，並使用變數中的資料填入該表單中的欄位。最後，我們使用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中文網其他相關文章！