HTML, CSS et jQuery : créez un tableau de données avec une fonctionnalité de recherche-js tutoriel-php.cn

HTML, CSS et jQuery : créez un tableau de données avec une fonctionnalité de recherche

WBOY

Libérer： 2023-10-26 10:03:29

original

1001 Les gens l'ont consulté

HTML, CSS et jQuery : créez un tableau de données avec une fonctionnalité de recherche

HTML, CSS et jQuery : créez un tableau de données avec fonction de recherche

Dans le développement Web moderne, les tableaux de données sont un élément fréquemment utilisé. Afin de faciliter la recherche et le filtrage des données par les utilisateurs, l'ajout de fonctions de recherche aux tableaux de données est devenu une fonction essentielle. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une table de données avec fonction de recherche et fournira des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons créer une structure HTML de base pour accueillir le tableau de données et la fonction de recherche. L'exemple de code HTML est le suivant :

<!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>

Copier après la connexion

Le code ci-dessus crée une zone de saisie et un formulaire de données. La zone de saisie est utilisée pour saisir des mots-clés pour la recherche, et le contenu du formulaire de données est une simple liste d'informations sur les employés.

2. Style CSS

Ce qui suit est le code de l'exemple de fichier CSS pour ajouter des styles à la table de données et au champ de recherche :

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;
}

Copier après la connexion

3 Script jQuery

Enfin, nous utilisons jQuery pour écrire un script simple à implémenter. la fonction de recherche. Le code est le suivant :

$(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)
    });
  });
});

Copier après la connexion

Le code ci-dessus surveillera l'événement de saisie au clavier de la zone de saisie. Chaque fois que du contenu est saisi, les lignes du tableau seront filtrées en fonction des mots-clés, et seules les lignes contenant les mots-clés seront affichées. .

Jusqu'à présent, nous avons terminé la création d'un tableau de données avec fonction de recherche ! Lorsque l'utilisateur saisit un mot-clé dans la zone de saisie, seules les lignes contenant le mot-clé seront affichées.

Pour résumer, cet article montre comment créer un tableau de données avec fonction de recherche grâce à une combinaison de HTML, CSS et jQuery. A travers cet exemple, nous pouvons voir la puissance du HTML, CSS et jQuery, qui peuvent facilement ajouter divers effets interactifs aux pages Web. J'espère que cet article vous sera utile lors du développement de pages Web !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!