jquery dynamically sets tr to show and hide

With a large amount of data and information displayed on web pages, scroll bars and paging can no longer meet our needs. Therefore, we need some better ways to display and hide data. This article will introduce how to use jQuery to dynamically set the display and hiding of tr, and directly display or hide data in the table.

1. Clear the table

In the process of dynamically setting the table, it is best to clear the table first. Use the following code to clear the table:

$("#myTable tbody tr").remove();

Where, #myTable is the table ID you want to operate, tbody represents the body of the table, and tr is the table row.

2. Display all rows

To display all rows in the table, you can use the following code:

$("#myTable tbody tr").show();

In this way, all rows of the table will be displayed.

3. Hide all rows

To hide all rows in the table, you can use the following code:

$("#myTable tbody tr").hide();

This will hide all table rows.

4. Display rows according to conditions

Use the following code to display rows according to conditions:

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).show();

Among them, the conditions can be modified according to your needs. This method can display rows based on specific criteria, such as text content, class, or other attributes.

5. Hide rows based on conditions

Use the following code to hide rows based on conditions:

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).hide();

This will hide rows based on specified conditions.

6. Search rows

Use the following jQuery code to search for table rows:

$("#myTable tbody tr").each(function () {
    var rowText = $(this).text().toLowerCase();
    $('input[type="text"]').keyup(function () {
        if ($(this).val().toLowerCase() === "" || rowText.indexOf($(this).val().toLowerCase()) !== -1) {
            $(this).closest("tr").show();
        } else {
            $(this).closest("tr").hide();
        }
    });
});

This code first traverses all table rows and enters text in the input box. search. If the text box has no content, all rows are displayed; if a match is found, only the matching rows are displayed; otherwise, all remaining rows are hidden.

7. Summary

Using jQuery, it is very easy to dynamically set the display and hiding of table rows. This article explains how to clear a table, show or hide all rows, show or hide rows conditionally, and how to search table rows. These techniques allow you to better display data and improve user experience.

The above is the detailed content of jquery dynamically sets tr to show and hide. For more information, please follow other related articles on the PHP Chinese website!