Does jquery search table content?

When writing web applications, tables are a common way of displaying data. Often, these tables contain large amounts of data, requiring users to search in order to filter out the specific data that meets their needs. For this, we can use jQuery to implement table search functionality.

First, we need to create a table in HTML and add headers and data rows to it:

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

Next, we need to write jQuery code to implement the search function. First, we convert the table contents into an array and save it in a variable:

$(document).ready(function() {
  var tableData = [];
  $('#myTable tbody tr').each(function(row, tr) {
    tableData[row] = {
      'name': $(tr).find('td:eq(0)').text(),
      'age': $(tr).find('td:eq(1)').text(),
      'gender': $(tr).find('td:eq(2)').text()
    }
  });
});

In this code, we use jQuery's each method to iterate through each row of the table and convert it into a containing An object with 3 attributes (name, age, gender). Among them, we used the eq method to get the index value of each cell, and the text method to get the text content in the cell.

Next, we can write a search function to filter the table data based on the keywords entered by the user. In this function, we have used jQuery's grep method, which can be used to find specific elements in an array:

function searchTable(inputVal) {
  var filteredData = $.grep(tableData, function(item) {
    return item.name.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.age.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.gender.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
  });
  return filteredData;
}

In this code, we have used the toLowerCase method to convert the keyword and table data into Lowercase letters, allowing for case-insensitive searches. Then, we use the indexOf method to find table data that contains the keyword.

Finally, we need to bind an event handler to call the search function when the user enters a keyword and update the table content:

$('#searchInput').on('keyup', function() {
  var inputVal = $(this).val();
  var filteredData = searchTable(inputVal);
  var tableRows = '';
  $.each(filteredData, function(index, data) {
    tableRows += '<tr>' +
                   '<td>' + data.name + '</td>' +
                   '<td>' + data.age + '</td>' +
                   '<td>' + data.gender + '</td>' +
                 '</tr>';
  });
  $('#myTable tbody').html(tableRows);
});

In this code, we use the keyup event To listen to user input and get the keywords in the text box. We then call the search function to get the filtered table data and convert it into HTML code in order to update the table content.

To sum up, we used jQuery to write a piece of code to implement the keyword-based table search function. In this way, users can easily find specific data, improving system usability and user experience.

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