Add and delete the query function in jquery table

With the continuous development of Internet technology, the importance of web applications is increasing day by day. The table is an important information display tool and is commonly used in various management systems. In our program, we need a table to display data, and we also need a convenient tool to add, delete, modify and check the table, which can greatly improve our work efficiency. This article will introduce how to use jQuery to implement the addition, deletion, modification and query functions of tables.

First, you need an HTML table. A simple table can be created using the following HTML code.

<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>

Next, we need to add jQuery dependencies.

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

Then, we can start to implement the add, delete, modify, and check functions.

Add function

In order to add the function to the form, we need a form to allow users to enter data. The form can be created using the following HTML code.

<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>

Next, add the following code in 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();
});

First, we use e.preventDefault() to prohibit the browser's default submission behavior. We then get the name and age from the form and generate a new number based on the last row's number. We then use JQuery to dynamically add a new row and append it to the end of the table. Finally, we call the reset() method to reset the form field's value to empty.

Now, we have successfully added the row function.

Delete function

Let’s implement the function of deleting rows. We can add a delete button in the HTML code of the table, as shown below:

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

Then, we can use the following jQuery code to implement the function of deleting data rows.

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

First, we use the .on() event listener to listen to the click event of the .delete button, and use closest() Method gets its nearest ancestor element, which is the table row, and removes it using the remove() method. Before that, we use the confirm() method to confirm to the user whether they really want to delete this row of data, so as to avoid users from accidentally deleting data.

Modification function

Now we will implement the function of modifying row data. Likewise, we add an "Edit" button to each row of the table.

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

Then, we need to add a click event listener for the edit button and create a form in it to fill the form with the original data as shown below.

$("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>
  `);
});

First, we use the closest() method to get the ancestor element of the current edit button, which is the table row, and use the find() method to get the ancestor element through the selector The data in the first cell (i.e. ID), second cell (i.e. name), and third cell (i.e. age) of the row is then stored into variables.

Next, we create a new form and fill the fields in the form with the data in the variables. Finally, we use the html() method to replace the contents of the table rows with the form's HTML code.

For the save operation, we can use the following jQuery code to achieve it.

$("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>
  `);
});

First, we use the closest() method to get the ancestor element of the current form, that is, the table row, and use the find() method to get the ID of the row. We then use the html() method to update the form's data into the table row, and use the Delete and Edit buttons to re-add to the row. Finally, we can reset the form's fields to empty using the reset() method.

Query function

Finally, let’s implement a simple query function. We can add a text input box to the page and filter the table data with the help of jQuery. We can use the following HTML code to create the query bar.

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

Then, we can use the following jQuery code to implement the query function.

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

First, we use the .submit() method to add a submission event listener to the form, and use e.preventDefault() to suppress the default behavior. We then get the keywords from the query column and use the hide() method to hide all rows of the table. Finally, we use the :contains() selector to filter the rows that need to be displayed based on keywords, and use the show() method to display these rows.

At this point, we have implemented a basic jQuery table addition, deletion, modification and query function. Through this method, users can easily add, delete, modify and query table data, greatly improving work efficiency.

The above is the detailed content of Add and delete the query function in jquery table. For more information, please follow other related articles on the PHP Chinese website!