首頁  >  文章  >  web前端  >  jquery表格增刪該查功能

jquery表格增刪該查功能

王林
王林原創
2023-05-11 21:43:06887瀏覽

隨著網路科技的不斷發展,網頁應用的重要性日益增加。而表格是重要的資訊展示工具,常用於各種管理系統。在我們的程式中需要一個表格來展示數據,同時也需要一個方便的工具來對表格進行增刪改查的操作,這樣可以大大提高我們的工作效率。本文將介紹如何借助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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn