jQuery implementiert Suchformular
In Webanwendungen sind Tabellen eine gängige Form der Datenanzeige. Bei großen Datenmengen ist es häufig erforderlich, eine Suchfunktion hinzuzufügen, um die benötigten Daten schnell zu finden. In diesem Artikel wird erläutert, wie Sie mit jQuery die Suchformularfunktion implementieren.
Zuerst müssen wir etwas HTML-Code vorbereiten, einschließlich eines Formulars und eines Eingabefelds. Unser Formular enthält Informationen wie Name, Alter, Geschlecht und Nationalität.
| 姓名 | 年龄 | 性别 | 国籍 |
|---|---|---|---|
| 张三 | 25 | 男 | 中国 |
| 李四 | 30 | 女 | 中国 |
| John Doe | 40 | 男 | 美国 |
| Jane Doe | 35 | 女 | 美国 |
Als nächstes müssen wir etwas JavaScript-Code schreiben. Wir werden die jQuery-Bibliothek verwenden, um den Codierungsprozess zu vereinfachen. Zuerst müssen wir das Eingabefeld und die Tabellenelemente abrufen.
var input = $("#myInput"); var table = $("#myTable");
Dann müssen wir einen Ereignis-Listener hinzufügen, um die Suchfunktion auszulösen, wenn wir etwas in das Eingabefeld eingeben.
input.on("keyup", function() { var value = $(this).val().toLowerCase(); // 获取输入框的值，并将其转换为小写字母 table.find("tr").not(":first").filter(function() { // 找到表格中所有行（除第一行标题外）并过滤出与输入框中内容不匹配的行 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) // toggle方法根据匹配结果显示或隐藏行 }); });
In diesem Code verwenden wir die jQuery-Methodeon(), um einen Ereignis-Listener hinzuzufügen. Wenn das Eingabefeld das Ereigniskeyupauslöst, ruft der Code den Wert des Eingabefelds ab und wandelt ihn in Kleinbuchstaben um. Anschließend verwenden wir die jQuery-Methodenfind()undfilter(), um nach passenden Inhalten zu suchen, und verwenden die Methodetoggle()zum Ein- oder Ausblenden OK. In diesem Beispiel verwenden wir die MethodeindexOf(), um zu prüfen, ob der Text den Suchbegriff enthält.on()来添加事件监听器。当输入框触发keyup事件时，代码将获取输入框的值并将其转换为小写字母。然后，我们使用jQuery的方法find()和filter()来搜索匹配的内容，并使用toggle()方法显示或隐藏行。在这个例子中，我们使用了indexOf()方法来检查文本是否包含搜索词。
下面是完整的HTML和JavaScript代码：
jQuery实现搜索表格
| 姓名 | 年龄 | 性别 | 国籍 |
|---|---|---|---|
| 张三 | 25 | 男 | 中国 |
| 李四 | 30 | 女 | 中国 |
| John Doe | 40 | 男 | 美国 |
| Jane Doe | 35 | 女 | 美国 |
使用jQuery实现搜索表格的功能比较简单，只需要编写少量的代码即可实现。通过使用jQuery的方法find()、filter()和toggle()
find(),
filter()und
toggle()können wir problemlos nach passenden Inhalten suchen und diese anzeigen oder ausblenden .
Das obige ist der detaillierte Inhalt vonjquery implementiert Suchformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
