How to traverse the table to get each tr in jquery

During the jQuery development process, table processing is a very common requirement, and traversing the table and taking out each tr element is also one of the basic operations. Below we will use sample code to introduce in detail how to use jQuery to traverse the table and remove each tr element.

First, we need to prepare an HTML table that contains multiple elements. An example is as follows:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

Next, we can use the following code to traverse each tr element of this table and perform related operations.

$("#myTable tbody tr").each(function() {
  //这里可以对每个tr元素进行操作
  console.log($(this).html());
});

In the above code, we use the jQuery selector $("#myTable tbody tr") to select all tr ​​elements in the tbody tag in the table. Next, use the .each() method to traverse and operate on each tr element. Here, we have printed the contents of each tr element to the console, which you can replace with the code you need.

It should be noted that we use #myTable in our selector to obtain the entire table, and tbody is used to obtain the content part of the table, avoiding the The headers are also traversed.

In addition, during the operation of table elements, you can also obtain the sub-element td in each tr element and operate on it. The following example shows how to get all td elements in each tr.

$("#myTable tbody tr").each(function() {
  //获取当前行的td元素
  $(this).children('td').each(function() {
    //这里可以对每个td元素进行操作
    console.log($(this).html());
  });
});

The above code obtains all td elements of the current row through $(this).children('td'), and then uses the .each() method. Traverse and perform related operations.

Summary: Through the above example code, we can see that it is very simple to use jQuery to traverse the table and take out each tr element. You only need to use the selector to get the tr element in the table or use the sub-element selector to get the tr element. td element, and then use the .each() method to traverse. Of course, you can perform related operations on each tr or td element according to actual needs to achieve customized display of the table.

The above is the detailed content of How to traverse the table to get each tr in jquery. For more information, please follow other related articles on the PHP Chinese website!