Delete specified cells in table using jQuery

Title: Use jQuery to delete specific cell elements in the table

In web development, we often encounter situations where we need to operate tables, one of which Just delete specific cell elements in the table. This function can be easily achieved using jQuery. The following will use specific code examples to demonstrate how to use jQuery to delete specific cell elements in a table.

First, we need a simple HTML table structure as an example:

<table id="myTable">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
</table>

In the above example, we have a table containing name, age and action buttons, the last of each row The cell contains a "Delete" button. Our goal is to delete the row's data after clicking the "Delete" button.

Next, we use jQuery to implement the delete function. First introduce the jQuery library into the page:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Then write jQuery code to implement the delete function:

<script>
$(document).ready(function(){
    $('.deleteBtn').click(function(){
        $(this).closest('tr').remove();
    });
});
</script>

In the above code, we first use $(document).ready( ) to ensure that the page is loaded before executing the code. Then, we listen to all "Delete" button click events through $('.deleteBtn').click(). When the button is clicked, find the closest <tr> element (i.e. the current row) through <code>$(this).closest('tr').remove(), and then delete it The bank.

Now, when the "Delete" button of any row is clicked, the data of that row will be removed from the table.

With the above detailed code example, we show how to delete specific cell elements in a table using jQuery. This method is simple and efficient, and can help us perform table operations more conveniently in web development.

The above is the detailed content of Delete specified cells in table using jQuery. For more information, please follow other related articles on the PHP Chinese website!