jquery table dynamically deletes a row of data

When developing web applications, data tables are a common component and are usually used to display data. However, sometimes we need to delete a certain row of data from the table, and it is very convenient to use jQuery to achieve this function.

In jQuery, we usually use the remove() method to remove DOM elements. Therefore, when deleting a row of data in the table, we need to first obtain the DOM element of this row, and then use the remove() method to remove it from the table.

First, let's take a look at how to get a row of data in the table. Suppose we have a table where each row has a delete button and when the user clicks the delete button we need to delete that row from the table. Here is the HTML code for a sample table:

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

In this table, each row contains three cells, the last of which contains a button named "Delete". Now, we can use jQuery to add a click event handler to each delete button to delete its corresponding row. The following is the implementation code:

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

In the above code, we first use the $() function to find all buttons named "delete-row" after the document is loaded, and Added a click event handler for each button. When the user clicks on the delete button, the click event will fire and the callback function will be executed.

In the callback function, we use the closest() method to find the row where the current button is located and store the row in the row variable. We then remove the row from the table using the remove() method.

It is important to note that although we use the closest() method, it will only find the closest matching element, so if the delete button is not directly included in the row, but Within a cell or other element, you'll need to modify the selector to match the correct element.

This is how to dynamically delete a row of data in a table using jQuery. If you are developing a web application, using this approach can make it easier for users to edit and manage data.

The above is the detailed content of jquery table dynamically deletes a row of data. For more information, please follow other related articles on the PHP Chinese website!