HTML, CSS and jQuery: Make a data table with search functionality-JS Tutorial-php.cn

HTML, CSS and jQuery: Make a data table with search functionality

WBOY

Release： 2023-10-26 10:03:29

Original

998 people have browsed it

HTML, CSS and jQuery: Make a data table with search functionality

HTML, CSS and jQuery: Make a data table with search function

In modern web development, data tables are a frequently used element. In order to facilitate users to find and filter data, adding search functions to data tables has become an essential function. This article will introduce how to use HTML, CSS and jQuery to create a data table with search function, and provide specific code examples.

1. HTML structure

First, we need to create a basic HTML structure to accommodate the data table and search function. The sample HTML code is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>带有搜索功能的数据表格</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>带有搜索功能的数据表格</h1>
  
  <input type="text" id="search-input" placeholder="输入关键字搜索">
  
  <table id="data-table">
    <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>
</body>
</html>

Copy after login

The above code creates an input box and a data form. The input box is used to enter keywords for search, and the content of the data form is a simple list of employee information.

2. CSS style

The following is the code of the sample CSS file, used to add styles to the data table and search box:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
}

#search-input {
  width: 300px;
  height: 30px;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 5px;
}

#data-table {
  width: 100%;
  border-collapse: collapse;
}

#data-table th, #data-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

#data-table th {
  text-align: left;
}

#data-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

#data-table tbody tr:hover {
  background-color: #ddd;
}

Copy after login

3. jQuery script

Finally, we use jQuery to write a simple script to implement the search function. The code is as follows:

$(document).ready(function() {
  $("#search-input").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#data-table tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Copy after login

The above code will monitor the keyboard input event of the input box. Each time content is entered, the table rows will be filtered based on the keywords, and only the rows containing the keywords will be displayed.

So far, we have completed the production of data tables with search functions! When the user enters a keyword in the input box, only the rows containing the keyword will be displayed.

To sum up, this article demonstrates how to create a data table with search function through the combination of HTML, CSS and jQuery. Through this example, we can see the power of HTML, CSS and jQuery, which can easily add various interactive effects to web pages. I hope this article will be helpful to you when developing web pages!

The above is the detailed content of HTML, CSS and jQuery: Make a data table with search functionality. For more information, please follow other related articles on the PHP Chinese website!