Javascript搜索和筛选表
基础概念
在JavaScript中，搜索和筛选表格通常涉及对表格中的数据进行查找和过滤，以满足特定的条件。这可以通过遍历表格的行和单元格，并应用条件逻辑来实现。
相关优势
- 灵活性：可以根据多种条件进行筛选和搜索。
- 实时性：用户输入时即可实时显示结果。
- 用户体验：提高用户在大量数据中找到所需信息的效率。
类型
- 基于文本的搜索：查找包含特定文本的行。
- 基于属性的筛选：根据行的特定属性（如日期、数字等）进行筛选。
应用场景
- 电子商务网站的产品列表：允许用户按名称、价格或类别搜索产品。
- 数据分析仪表板：允许用户快速查找和分析数据集中的特定信息。
- 任务管理工具：帮助用户按截止日期、优先级或标签筛选任务。
示例代码
以下是一个简单的示例，展示如何在JavaScript中实现基于文本的搜索功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Search and Filter</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<input type="text" id="searchInput" onkeyup="filterTable()" placeholder="Search for names..">
<table id="dataTable">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<!-- More rows here -->
</table>
<script>
function filterTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchInput");
filter = input.value.toUpperCase();
table = document.getElementById("dataTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].classList.remove("hidden");
} else {
tr[i].classList.add("hidden");
}
}
}
}
</script>
</body>
</html>遇到的问题及解决方法
问题：搜索功能不响应或响应缓慢。
原因：
- 可能是因为表格数据量过大，导致每次按键都进行全表扫描。
- JavaScript代码中可能存在性能瓶颈。
解决方法：
- 优化搜索算法：例如，使用更高效的搜索算法或数据结构。
- 延迟搜索：引入防抖（debounce）技术，减少不必要的搜索操作。
- 分页显示：如果表格非常大，可以考虑分页显示数据，减少单次需要处理的数据量。
通过上述方法，可以有效提升搜索和筛选表格的性能和用户体验。
相关·内容
2回答
我想编写一个允许我在表中进行搜索的js函数。我只想显示那些包含搜索文本的行 虽然我能够使它只对特定的列起作用，但我并没有对整个行成功。所以我猜它就在for循环内部的某个地方。你知道我哪里做错了吗？
浏览 26提问于2020-11-26得票数 1
是否可以通过Javascript或PL/SQL API在Oracle Apex中为IG设置筛选器？
在做我的研究时，我偶然发现了或一些用Javascript定制IGs的博客文章。因此，设置筛选器类似于，您可以在其中设置交互式报告(IR)的筛选器，应该可以设置列名、运算符和筛选器值。我弄清楚了内部表的名称，如果设置了过滤器，那么它们将存储在哪里( IR过滤器的APEX_APPLICATION_PAGE_IR_COND和IG的A
浏览 5提问于2018-08-06得票数 3
回答已采纳
我有一个HTML表，我试图使用模糊搜索和部分匹配过滤。我尝试过许多JS库，但它们似乎不能同时提供这两个筛选器选项。我试过FuzySort.js，FlexSearch.js和其他。前端显示表。管理员有一个单独的前端，它们可以将数据添加/删除/编辑到，以过滤/排序/搜索前端的表客户端。全文搜索模糊 matches.
预期结果：如果.表#1的名称为&qu
浏览 2提问于2020-12-14得票数 0
回答已采纳
在筛选我的表时遇到问题。如果搜索在其各自的单元格中找到任何匹配项，我希望整行都可见。目前它只显示确切的单元格。<input type="text" id="searchText" /> function contains(text_one$(this).hide(); $(this).show();
浏览 13提问于2017-08-11得票数 1
回答已采纳
1回答
我正在制作这个网站-webservice，我真的很需要从DB打印数据，并在两者之间做一些计算。1)有一个XXXX.php，从这里我通过一些AJAX函数传递一些参数，然后回显结果，然后AJAX填充特定的div。谢谢
浏览 1提问于2014-02-26得票数 0
回答已采纳
使用，我希望在初始化gridjs表时执行搜索。更广泛地说，我想知道如何在不需要用户使用输入字段的情况下以编程方式使用搜索。我试过的是：
<
浏览 3提问于2021-02-25得票数 0
回答已采纳
3回答
我使用的是有效的JavaScript表搜索筛选器，但是当添加数字时，我只需要精确的匹配。如何只完成对精确搜索的过滤？基本表示例：
函数myFunction() { var输入、筛选器、表、tr、td、i、txtValue；输入= document.getElementById("myInput")；filter = input.value.toUpperCase()；<em
浏览 0提问于2019-02-14得票数 0
我从MySQL表中查询了一个大表(带有表格数据)。每一列都是可排序的，除一列之外，所有列都是可选的(用户可以单击要显示的列)，不同的列可以使用不同的搜索条件进行筛选(筛选出更多的搜索结果)。我想知道在创建这样一个表时是否已经有了一种方法，或者我必须从头开始实现它。真正的遗憾是我不能使用JavaScript.
谢谢。
浏览 9提问于2011-03-15得票数 0
回答已采纳
我的目标是根据内容编写词汇表。在字母表搜索中，我将字母分组并设置在块中，然后单击字母，它将进入包含特定内容的页面。在这里，我使用了URL是本地主机/术语表。
在关键字搜索中，这里还使用了相同的URL (localhost/术语表)，我在块中设置了搜索功能，当使用内容关键字搜索内容时。它不过滤关键字搜索，只用于字母<e
浏览 0提问于2016-09-06得票数 0
1回答
在Wicket应用程序中，我得到了一个扩展名为SortableDataProvider和一个可单击列(AbstractColumn扩展名)的DefaultDataTable。datatable伴随着一个搜索字段和按钮，因此用户可以筛选该表(比较搜索词和表内容)。
然而，我更喜欢一种不同的方法。如果用户不必单击按钮来匹配结果，但在每个字符插入或删除到搜索字段后(立即过滤，而不是在按下按钮后)，表格将更新，这会更好。此外，与搜索<
浏览 0提问于2013-04-17得票数 0
1回答
我在中创建了一个包含两个列(标签、计数)的表。我有10,000个标签，并且希望能够通过标签搜索，而不是按字母顺序滚动一个10,000个标签的列表，以找到特定的标签。有什么解决办法吗？
浏览 0提问于2019-04-19得票数 2
回答已采纳
2回答
我有一个包含Name列的表，但是我不想在表中显示该列，但是我需要在它上添加一个搜索筛选器。 "sName": "Name", "bSearchable": true当我设置"bVisible": true时，过滤器和列的文本框都会
浏览 6提问于2015-10-20得票数 6
回答已采纳
我一直在处理表格和大量数据。我的网站上有一个有一万行的表格。该表具有动态搜索、筛选等功能。考虑到性能，我一直在使用纯JavaScript，但由于行数太多，它变得滞后。对于性能更好的纯JavaScript，你们知道其他的选择吗？EDIT2>搜索是动态的。搜寻：
当字段超过3个字符时搜索，并且只有
浏览 3提问于2013-08-08得票数 3
因此，我认为这可能是数据表库中的一个bug。我只使用他们在jsfiddle中的示例代码就可以再现这一结果。重建步骤：
<script src=&qu
浏览 1提问于2018-04-17得票数 5
回答已采纳
我的场景是:我在Google页面上有一个数据库，上面有人名和信息。我发现了两种搜索属于人类的数据的方法。E:E, L28)),"No Results"))这一行所做的是搜索M3中的任何内容，但它不区分大小写。但是，对于我的用例，我需要知道它是否包含一个文本片段。例如:我搜索'AD‘，我应该得到这些结果ADdi
浏览 0提问于2019-03-09得票数 0
回答已采纳
我的第一次测试获得了运行在sql2008上的具有激活的完全文本搜索的给定数据库，结果失败了。sql2008花了好几次sql2000时间，但为什么呢？
浏览 0提问于2010-03-27得票数 2
回答已采纳
1回答
我在我的应用程序(在Rails 6上)和的几个页面上使用引导表。import 'bootstrap-table/dist/locale/bootstrap-table-fr-FR.js';
它是在application.html.erb中用<%= javascript_pack_tag'application&#
浏览 3提问于2020-06-15得票数 2
回答已采纳
我正在使用appengine与python (版本2.7)的web应用程序，处理职务列表和求职。后端由一个“作业”表组成，该表由标题、日期、经验等20+字段组成。我为每个过滤器的排列和组合定义了必要的组合索引。正如您所猜到的，索引的数量很高。
搜索分为两部分:内置的数据存储过滤和基于细化结果的自定义过滤。需要使用自定义筛
浏览 5提问于2017-05-23得票数 0
回答已采纳
1回答
我有一个数据表，其中有100+列：
.等
如何创建允许筛选显示哪些列的搜索输入字段？除了搜索和过滤表行之外，我还想筛选和搜索表列。如果在任何列中找到完整的搜索文本，则显示这些列。例如，如果搜索文本是"Cal"，"California -洛杉矶“和<
浏览 5提问于2015-06-19得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
