Example demonstration: Use jQuery to delete the td element in the table-JS Tutorial-php.cn

Example demonstration: Use jQuery to delete the td element in the table

PHPz

Release： 2024-02-23 11:45:04

Original

1148 people have browsed it

Example demonstration: Use jQuery to delete the td element in the table

Summary: This article will introduce how to use jQuery to delete the td element in the table, and demonstrate the process through specific code examples.

In web development, we often encounter situations where we need to dynamically operate elements in the table. You can use jQuery to easily delete the td element in the table. The following will use specific code examples to demonstrate how to delete the td element in the table through jQuery.

First, we need a simple HTML table structure as an example. We assume that there is a table with 3 rows and 4 columns, as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除表格中的td元素</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable" border="1">
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
    <td>行1列3</td>
    <td>行1列4</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
    <td>行2列3</td>
    <td>行2列4</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
    <td>行3列3</td>
    <td>行3列4</td>
  </tr>
</table>
<button id="deleteBtn">删除单元格</button>
</body>
</html>

Copy after login

In the above code, we create a table with 3 rows and 4 columns, and add a button to trigger deletion operate.

Next, we will use jQuery to implement the function of deleting the td element in the table. The following is a complete jQuery code example:

$(document).ready(function(){
  $('#deleteBtn').click(function(){
    // 删除第二行第三列的单元格
    $('#myTable tr:eq(1) td:eq(2)').remove();
  });
});

Copy after login

In the above code, we first use $(document).ready() to ensure that the document is loaded before executing the code. Then listen to the button click event through $('#deleteBtn').click(). When the button is clicked, the callback function will be executed. In the callback function, we use $('#myTable tr:eq(1) td:eq(2)').remove() to select the cell in the second row and third column, and its deleted.

Finally, we only need to introduce the jQuery library into the page and place the above jQuery code in the <script></script> tag to achieve the function of deleting the td element in the table.

Through the above example demonstration, readers can learn how to use jQuery to delete the td element in the table, and understand the specific code implementation process. I hope this article will be helpful to readers when dealing with table elements in web development.

The above is the detailed content of Example demonstration: Use jQuery to delete the td element in the table. For more information, please follow other related articles on the PHP Chinese website!