使用JavaScript搜索表
使用服务器端脚本进行搜索可以根据情况的需要而复杂或简单。但是,如果您有一个结果表,并且只想对该表启用简单的JavaScript搜索,那么这可能是适合您的脚本。
要使用JavaScript搜索表,您需要将表拆分为多个位,这可以使用getElementsByTagName()函数完成,该函数采用要捕获的元素的名称。因此,要将表的所有行作为数组获取,您需要传递tr的值。
varrows=document.getElementsByTagName("tr");
然后,我们可以使用以下代码遍历这些行,获取要搜索的列。
for ( var i = 0; i < rows.length; i++ ) { var fullname = rows[i].getElementsByTagName("td"); fullname = fullname[0].innerHTML.toLowerCase(); }
在继续进行之前,我们需要一个表格,以便用户可以输入信息和可用于搜索的表格。首先是表单,输入框的操作将导致一个名为的函数doSearch()运行,其中将包含我们的搜索代码。
接下来,表。请注意,我在此表的末尾添加了另一行。如果用户输入了未找到的查询,它将用于向用户显示注释。
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
我们在搜索功能中需要做的第一件事是准备搜索词。这会将查询字符串转换为小写字母,然后我们可以将其匹配到表列。
var q = document.getElementById("q"); var v = q.value.toLowerCase();
现在,我们可以遍历每一行的值,并尝试将其与查询字符串中的值匹配。如果匹配,则显示该行,如果不匹配,则将其隐藏。
for ( var i = 0; i < rows.length; i++ ) { var fullname = rows[i].getElementsByTagName("td"); fullname = fullname[0].innerHTML.toLowerCase(); if ( fullname ) { if (v.length== 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1 ) ) { rows[i].style.display = ""; } else { rows[i].style.display = "none"; } } }
这是完整的功能,包括实现无结果注释的代码。