jquery query table median value

In web development, tables are common and important elements. How to query and filter table data is a common requirement. jQuery is a very powerful JavaScript library that provides a wealth of selectors and DOM manipulation methods. This article will introduce using jQuery to query values ​​in tables.

1. Get the data in the table

To query the values ​​in the table, you first need to get the data in the table. Using jQuery you can easily get data from tables.

HTML code is as follows:

  

    

      
Name
      
Age
      
Address
    
  
  

    

      
John
      
25
      
London
    
    

      
Jane
      
30
      
New York
    
    

      
Bob
      
20
      
Paris
    
  

The code for using jQuery to obtain table data is as follows:

var tableData = [];
$("#myTable tbody tr").each(function() {
  var rowData = [];
  $(this).find("td").each(function() {
    rowData.push($(this).text());
  });
  tableData.push(rowData);
});
console.log(tableData);

Parsing code: first define an empty array tableData, and then use the each() method to traverse For each row (tr) in the table, use the find() method to traverse each cell (td) in the row, and add the text content in the cell to the rowData array. Finally, the rowData array is added to the tableData array, thus obtaining a two-dimensional array, in which each subarray represents a row of data in the table.

2. Querying the data in the table

Querying the data in the table usually includes two aspects: query by row and query by column. These two query methods will be introduced in detail below.

2.1 Query by row

Query by row means to query the row data based on the value of a certain column in the table. For example, in the above table, you want to query information about all people living in "London".

HTML code is as follows:

Search

The code for querying by row using jQuery is as follows:

$("#searchBtn").click(function() {
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var found = false;
    $(this).each(function() {
      if ($(this).text().toLowerCase().indexOf(searchText) >= 0) {
        found = true;
        return false;
      }
    });
    if (found) $(this).show();
    else $(this).hide();
  });
});

Parsing code: First get the value of the text box used for search and convert it They are in lowercase letters to facilitate subsequent comparison. Then traverse each row in the table, and then traverse each cell to determine whether the value in the cell contains the keyword in the search text box. If found, display the row, otherwise hide the row.

2.2 Query by column

Query by column means to query the column data based on the value of a row in the table. For example, in the above table, you want to query the information of all people older than 25 years old.

HTML code is the same as above.

The code for querying by column using jQuery is as follows:

$("#searchBtn").click(function() {
  var columnIndex = 1; //查询年龄这一列
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var tdValue = $(this).find("td:eq(" + columnIndex + ")").text();
    if (parseInt(tdValue) > parseInt(searchText)) $(this).show();
    else $(this).hide();
  });
});

Parsing code: First define the index (columnIndex) of the column to be queried as 1, which is the age column. Then get the value of the search text box and also convert it to lowercase letters. Traverse each row in the table, obtain the value of the corresponding column in each row through the eq() method, and convert it to an integer type for comparison through the parseInt() method. If the conditions are met, the row of data is displayed, otherwise the row of data is hidden.

3. Summary

This article introduces the use of jQuery to query data in tables, including querying by rows and querying by columns. Through jQuery's selectors and DOM operation methods, you can easily query and filter table data. It should be noted that when the amount of table data is large, query performance may be affected, and an appropriate solution needs to be selected to improve query efficiency.

The above is the detailed content of jquery query table median value. For more information, please follow other related articles on the PHP Chinese website!