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

Table of Contents

带有搜索功能的数据表格

Home

Web Front-end

JS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 26, 2023 am 10:03 AM

html Search function data table

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 id="带有搜索功能的数据表格">带有搜索功能的数据表格</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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn