Heim > Artikel > Web-Frontend > HTML, CSS und jQuery: Erstellen Sie eine Datentabelle mit Suchfunktion
HTML, CSS und jQuery: Erstellen Sie eine Datentabelle mit Suchfunktion
- WBOYOriginal
- 2023-10-26 10:03:29906Durchsuche
HTML, CSS und jQuery: Erstellen Sie eine Datentabelle mit Suchfunktion
In der modernen Webentwicklung sind Datentabellen ein häufig verwendetes Element. Um Benutzern das Auffinden und Filtern von Daten zu erleichtern, ist das Hinzufügen von Suchfunktionen zu Datentabellen zu einer wesentlichen Funktion geworden. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery eine Datentabelle mit Suchfunktion erstellen, und es werden spezifische Codebeispiele bereitgestellt.
1. HTML-Struktur
Zunächst müssen wir eine grundlegende HTML-Struktur erstellen, um die Datentabelle und die Suchfunktion unterzubringen. Der Beispiel-HTML-Code lautet wie folgt:
<!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>Der obige Code erstellt ein Eingabefeld und ein Datenformular. Das Eingabefeld wird zur Eingabe von Schlüsselwörtern für die Suche verwendet, und der Inhalt des Datenformulars ist eine einfache Liste von Mitarbeiterinformationen.
2. CSS-Stil
Das Folgende ist der Code der Beispiel-CSS-Datei zum Hinzufügen von Stilen zur Datentabelle und zum Suchfeld:
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;
}3. Zum Schluss verwenden wir jQuery, um ein einfaches Skript zur Implementierung zu schreiben die Suchfunktion. Der Code lautet wie folgt:
$(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)
});
});
});Der obige Code überwacht das Tastatureingabeereignis des Eingabefelds. Bei jeder Eingabe von Inhalten werden die Tabellenzeilen anhand der Schlüsselwörter gefiltert und nur die Zeilen angezeigt, die die Schlüsselwörter enthalten .
Bislang haben wir die Erstellung einer Datentabelle mit Suchfunktion abgeschlossen! Wenn der Benutzer ein Schlüsselwort in das Eingabefeld eingibt, werden nur die Zeilen angezeigt, die das Schlüsselwort enthalten.
Zusammenfassend zeigt dieser Artikel, wie man durch eine Kombination aus HTML, CSS und jQuery eine Datentabelle mit Suchfunktion erstellt. Anhand dieses Beispiels können wir die Leistungsfähigkeit von HTML, CSS und jQuery erkennen, mit denen sich problemlos verschiedene interaktive Effekte zu Webseiten hinzufügen lassen. Ich hoffe, dieser Artikel wird Ihnen bei der Entwicklung von Webseiten hilfreich sein!
Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Erstellen Sie eine Datentabelle mit Suchfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!