Wenn die Tabelle viele Daten enthält und wir nicht Seite für Seite durchsuchen können, können wir über ein Suchfeld suchen.
Für ein besseres Erlebnis können wir für dieses Suchfeld das Keyup-Ereignis verwenden, um mit der Filterung zu beginnen, wenn der Benutzer etwas eingibt, anstatt nach Abschluss des Ausfüllens auf die Suchschaltfläche zu klicken.
Rendering:
Implementierungscode:
<html>
<head>
<meta charset="utf-8" />
<script src="jquery-1.3.2.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
$("tr.parent").click(function () {
$(this)
.siblings('.child_'+this.id).toggle();
});
$("tr.parent").addClass("selected");
$("#searchbox").keyup(function () {
$("table tbody tr").hide()
.filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
}).keyup();
});
</script>
<title></title>
</head>
<body>
<label>筛选</label>
<input type="text" id="searchbox"/>
<table>
<thead>
<tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td>前台设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_01"><td>李山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="parent" id="row_02"><td>前台设计组</td></tr>
<tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="parent" id="row_03"><td>前台设计组</td></tr>
<tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
</tbody>
</table>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der JQuery-Programmierung hilfreich ist.
