开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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）技术，减少不必要的搜索操作。
分页显示：如果表格非常大，可以考虑分页显示数据，减少单次需要处理的数据量。

通过上述方法，可以有效提升搜索和筛选表格的性能和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

VBA透视表筛选子程序

Sub 透视筛选(pf, pv, v) With ActiveSheet.PivotTables("数据透视表1").PivotFields(pf) .EnableMultiplePageItems...Else pii.Visible = v '存在 End If Next End With End Sub 调用例子： Call 透视筛选...("层数", Array("all"), False) '全部选中 Call 透视筛选("储位编码", Array("AA52"), True)

1.2K3 0

函数周期表丨筛选丨表丨ADDMISSINGITEMS

ADDMISSGITEMS函数被微软划分到“筛选器”这一大类之中，隶属于“表函数”。用途：对一些筛选，比如只显示“可见项目”类函数的补充，能让其显示一些“缺失项”。...语法 DAX= ADDMISSINGITEMS([,…],,[,…], [筛选条件]) 参数展示列：（可选，可重复）需要展示出来的列。汇总表：经过筛选处理之后的表。...筛选条件：（可选，可重复）定义筛选条件的表函数表达式。返回结果经过分组处理的表，一部分为筛选计算之后的“可见项”；一部分为不符合条件的“缺失项”。...乍一看区别不大，但是三者的内涵是不同的： 1、SUMMARIZE函数是可以通过筛选和计算对表进行处理的，但是结果却是可见项和缺失项都存在，计算上比较灵活，但是结果上不太满意； 2、SUMMARIZECOLUMNS...函数能更直接一些，可以通过筛选和计算直接显示可见项，但是结果上不太灵活； 3、FILTER函数偏向于筛选类，可以直接筛选表，可以与CALCULATE函数搭配计算，但是又比较复杂。

8750 0

函数周期表丨筛选丨表丨ALL

[1240] ALL函数 ALL函数隶属于“表函数”，被微软划分为“筛选”类函数之中。...主要用途：用来清除外部筛选器。语法 DAX= ALL( [表> | [, [, [,…]]]] ) 参数参数：可以是一个表；可以是表的一列或者多列。返回结果表或列。...例子1： ALL例子1 = ALL ( '例子' ) 结果： [1240] 单纯的ALL整个表，不与其他函数搭配使用，相当于整体的复制。...例子4： ALL例子4 = CALCULATE ( SUM ( '例子'[数量] ), ALL ( '例子'[日期] ) ) 结果： [strip] 结果为忽略外部筛选条件，返回其所有日期的汇总结果。

7630 0

函数周期表丨筛选丨表丨ALLNOBLANKROW

[8839ee5476a455a0a26b439d20d33505.png] ALLNOBLANKROW函数 ALLNOBLANKROW函数，隶属于“筛选类表函数”，在ALL函数系列家族中，其出场次数并不算特别多...用途： 1、用来对比父表和子表之间的差异。 2、适用于连锁类销售对比差异值。...语法 DAX= ALLNOBLANKROW( {表> | [, [, [,…]]]} ) 参数表：已经删除上下文筛选的表。列：（可重复）已经删除上下文筛选的列。...： [5b9b84faa9a411c844127b33ea922855.png] 可以看得出来，这种情况下，父表对于子表的筛选条件不造成影响，二者的结果是一致的。...ALLNOBLANKROW例子2 = COUNTROWS ( ALLNOBLANKROW ( '子表'[类别] ) ) 结果： [e847f8365e0746c1ce65ac496f38ad61.png] 这种情况下，父表的筛选效果依然没有生效

5720 0

函数周期表丨筛选丨表丨VALUES

[1240] VALUES函数 VALUES函数，隶属于“筛选”类函数。当参数为列时，返回结果会去除重复值，保留空项；当参数为表时，结果不会进行去重复操作。用途：适用于度量值计算。...ALL ( '例子' ) 结果： [1240] 1、表函数模式下，DISTINCT会对表进行去重操作；而VALUES和ALL函数相当于复制操作，并不会对源文件进行去重。...2、DISTINCT参数可以是表达式，而VALUES和ALL的参数不能是表达式。...2、ALL函数的列参数可以有多个，类似于笛卡尔积的效果；而DISTINCT和VALUES函数列参数只能有一个。...ALL函数在例子上下文中的计算，没有屏蔽掉例子的筛选效果，其计算结果包含空值项目；而在维度上下文中，清除了维度表的筛选效果，计算结果包含空值项目，每个返回值均为总计行数37。

9991 0

函数周期表丨筛选丨表丨CALCULATETABLE

[1240] CALCULATETABLE函数 CALCULATETABLE函数属于“筛选”类函数，隶属于“表函数”。...CALCULATETABLE函数内部的运行规律和影响因素与CALCULATE函数如出一辙，这里就不赘述了。...语法 DAX= CALCULATETABLE(,筛选器1>,筛选器2>,…) 参数表达式：必须项，可以是一个表，也可以是表的表达式。筛选器：可选项可重复，用来过滤条件使用。...返回结果根据筛选器生成的上下文对表达式进行计算，返回一张表。例子模拟数据： [1240] 这是白茶随机模拟的数据。...CALCULATETABLE函数在执行的时候，和CALCULATE函数相同，是先改变上下文环境，在新的上下文中计算表达式。

1.2K0 0

函数周期表丨筛选丨表丨ALLSELECTED

[1240] ALLSELECTED函数 ALLSELECTED函数，被微软划分为“筛选”类函数，隶属于“表函数”。其用途，常常是用来计算或者显示明面上的筛选影响，而忽略其行上下文的影响。...语法 DAX= ALLSELECTED([表> | [, [, [,…]]]] ) 参数表：（可选项）不能是表达式，现有表的名称。...注意：要么是表，要么是列；如果是多列，必须在同一表中。返回结果不带任何列或行上下文的上下文。...) ) 代码2： ALL例子2 = SUM ( '例子'[数据] ) / CALCULATE ( SUM ( '例子'[数据] ), ALL ( '例子' ) ) 结果： [strip] 依然遵循隐性筛选和显性筛选的原则...例子3，没有关系维度筛选生效：维度表 = DATESBETWEEN ( '例子'[坐标轴], DATE ( 2020, 1, 4 ), DATE ( 2020, 1, 8 ) ) 随机生成一个维度表，

1K0 0

函数周期表丨筛选丨表丨SUBSTITUTEWITHINDEX

隶属“筛选”类函数，属于“表函数”，高阶使用方法相对而言烧脑一些。用途： 1、用来提取维度，添加索引； 2、某些特定的问题添加数字索引可以转化为数学计算问题的方式。...也可以指被添加索引的表。...参照表：与主表有关系的参考表，通常指的是维度表。参照表[列]：与主表所共有的列，通常是模型关系中的一端。排序：调整索引列的排序方式。DESC/ASC。...INDEX虚拟表中，提取BA表中的一列，去掉重复项，作为维度参考。最后，利用SUBSTITUTEWITHINDEX函数，替换掉了两个虚拟表中的共有列[商品]，输出结果为[品名列]和[索引列]。...例子2：将我们刚才生成的维度表与事实表建立联系。

5614 0

函数周期表丨筛选丨表丨FILTER

[1240] FILTER函数 FILTER函数属于“筛选”类函数，隶属于“表”函数，其使用频率可以算得上最高的几个函数之一。用途：用来筛选表或者作为计算的筛选条件。...语法 DAX= FILTER(表>,) 参数表：可以是固定的表，也可以是表的表达式。条件：过滤条件。返回结果由符合筛选条件的行组成的表。...例子模拟数据： [1240] 例子1： FILTER例子1 = FILTER ( '例子', MONTH ( '例子'[日期] ) < 2 ) 结果： [1240] 筛选出2月份之前的所有数据。...例子2： FILTER例子2 = FILTER ( '例子', MONTH ( '例子'[日期] ) < 2 && '例子'[类别] = "白" ) 结果： [1240] 筛选出2月份之前，且颜色为“白...其效果等同于以下两组代码： FILTER和AND = FILTER ( '例子', AND ( MONTH ( '例子'[日期] ) < 2, '例子'[类别] = "白" ) ) 结果： [1240]

6370 0

函数周期表丨筛选丨表丨ALLEXCEPT

[1240] ALLEXCEPT函数 ALLEXCEPT函数属于“筛选”类函数，隶属于“表函数”，在ALL函数系列家族中，其地位是不可或缺的。 EXCEPT翻译成中文是什么意思？表示：除了的意思。...语法 DAX= ALLEXCEPT(表>,[,[,…]]) 参数表：要清除筛选器的表。列：（可重复）位于第一参数表中，需要保留筛选的列。除了这一列之外，其他列全部不受筛选影响。...注意：不能使用表的表达式和列的表达式。返回结果除了保留筛选器的那一列，清除了其他筛选条件的一个表。例子模拟数据： [1240] 这是白茶随机模拟的一份数据。...例子1： ALLEXCEPT例子1 = ALLEXCEPT ( '例子', '例子'[类别] ) 结果： [1240] 因为当前上下文环境为行上下文，默认筛选条件为空，结果返回为剔除了保留筛选的列一个表...，ALLEXCEPT的两个例子和ALL函数例子并未受到影响，对于ALLEXCEPT函数来说，没有触发被筛选的条件；而ALL是屏蔽掉了当前的所有筛选。

7360 0

函数周期表丨筛选丨表&值丨DISTINCT

[1240] DISTINCT函数 DISTINCT函数，隶属于“筛选”类函数。微软将其划分为两种模式，列与表模式。但是白茶觉得微软哪怕是不区分出来，相信大家也是了解的。...用途：去除表或列中的重复项。语法 DAX= DISTINCT(表or列) 参数 DISTINCT参数可以是表，也可以是列；表达式也是可以的。返回结果去除重复值的表或列。...当表为单列单行时，可以作为值使用。注：列模式下，返回结果受到筛选上下文影响；要与VALUES函数进行区分。...例子3： DISTINCT例子3 = COUNTROWS ( DISTINCT ( '例子' ) ) 结果： [1240] 可以用来统计表的行数。...VALUES统计 = SUMX ( VALUES ( '维度'[类别] ), CALCULATE ( COUNTROWS ( '例子' ) ) ) 结果： [1240] 将三组代码分别放到例子上下文和维度上下文的环境中

6740 0

hive模糊搜索表

4 1.hive模糊搜索表 show tables like '*name*'; 2.查看表结构信息 desc formatted table_name; desc table_name;...where partition_name = '2014-02-25'; 5.查看hdfs文件信息 dfs -ls /user/hive/warehouse/table02; 6.从文件加载数据进表(...数据是以load的方式加载到建立好的表中。数据一旦导入就不可以修改。...dwetl/LOG/APP/20140306/a_h02_click_log_credit_user.pl.4.log 19.查看perl进程 ps -ef|grep perl 20.hive命令移动表数据到另外一张表目录下并添加分区...'当前会话停留时间'; 26.hive开启简单模式不启用mr set hive.fetch.task.conversion=more; 27.以json格式输出执行语句会读取的input table和input

9082 0

hive模糊搜索表

1.hive模糊搜索表 show tables like '*name*'; 2.查看表结构信息 desc formatted table_name; desc table_name; 3.查看分区信息...where partition_name = '2014-02-25'; 5.查看hdfs文件信息 dfs -ls /user/hive/warehouse/table02; 6.从文件加载数据进表(...数据是以load的方式加载到建立好的表中。数据一旦导入就不可以修改。...dwetl/LOG/APP/20140306/a_h02_click_log_credit_user.pl.4.log 19.查看perl进程 ps -ef|grep perl 20.hive命令移动表数据到另外一张表目录下并添加分区...'当前会话停留时间'; 26.hive开启简单模式不启用mr set hive.fetch.task.conversion=more; 27.以json格式输出执行语句会读取的input table和input

4.6K9 0

函数周期表丨筛选丨值&表丨RELATED系列

[1240] RELATED函数 RELATEDTABLE函数这两个函数属于“筛选”类函数，通常情况下适用于跨表计算。用途：根据模型关系，匹配对应数值。...RELATED会根据模型关系将维度表的数据匹配到事实表，也就是多端找一端对应值； RELATEDTABLE是RELATED的表函数模式，通常是将事实表的数据匹配到维度表，即一端寻找多端的对应值。...语法语法1： DAX= RELATED(<列) 语法2： DAX= RELATEDTABLE(表>) 参数列：现有列，不能是表达式。表：现有表，不能是表达式。...例子模拟数据： [1240] [1240] 模型关系： [1240] 这是白茶随机模拟的一组数据，一份事实表，一份维度表；模型关系是很常见的一对多关系。...例子2： RELATEDTABLE错误示范 = RELATEDTABLE ( '例子' ) 结果： [1240] 这是白茶列举的一个错误示范，因为本身RELATEDTABLE函数属于表函数，结果返回一张表

5370 0

Excel: 受保护的工作表使用筛选功能

受保护的同时，希望可以正常使用筛选等功能。（1）关于查找设置保护后，如果要正常使用查找功能，需要确保查找范围内的单元格没有勾选隐藏。...（2）关于筛选设置保护后，如果要正常使用筛选功能，需要提前启用筛选模式。选中标题行，然后选中菜单栏中的筛选功能。最后再对表格进行保护设置，设置时勾选自动筛选这个选项。...，则不能取消筛选。...如果要取消筛选，需要先取消保护，然后再取消筛选。...参考资料： [1] 如何让受保护的工作表进行查找、筛选和排序的操作（http://club.excelhome.net/thread-1029711-1-1.html）

3.7K1 0

数据库单表查询 - 简单筛选查询

有任何想要讨论和学习的问题可联系我：zhuyc@vip.163.com。发布文章的风格因专栏而异，均自成体系，不足之处请大家指正。...数据库单表查询 - 简单筛选查询（附测试数据）本文关键字：数据库、数据查询语言、DQL 之前我们已经了解了SQL语言的分类，可以划分为：DDL（数据定义语言）、DML（数据操纵语言）、DQL（数据查询语言...SELECT：指定要查询的列，会直接影响结果表的列的个数 FROM：指定要查询的表 WHERE：[可选]，在需要进行数据筛选时使用，用于引导查询条件在使用表名和列名时，为了防止和关键字冲突，可以使用反引号...二、简单筛选如果说SELECT后面的字段个数影响了查询结果的列，那么数据筛选（或称条件查询）就会影响到查询结果的行，有很多不符合条件的数据会被过滤掉。...在进行数据筛选时，会直接用某个列的列名来做为参照，该列下的每个数据都会和给定的条件进行比较，如果满足就会被取出，在进行比较时一定要注意数据类型的匹配。 1.

4.3K3 1

示例工作簿分享：仿自动筛选的搜索框

标签：VBA，用户窗体下面分享的是两个非常好的作品，在Excel中使用VBA实现在组合框或列表框中进行自动筛选，就像我们在用百度搜索时那样，随着用户的输入，会逐渐减少相匹配的下拉列表项，以方便用户快速进行选择...图1 另一个示例工作簿添加了使用列表框/文本框实现与上面相同的功能，如下图2所示，并扩展能使用特殊字符和通配符，对筛选条件也提供了多个选项，包括以输入文本开头、包含输入文本、不包含输入文本、以输入文本结尾...、不筛选，等。...图2 有兴趣的朋友可以到ozgrid.com论坛中下载这两个示例工作簿，也可以在完美Excel公众号发送消息：自动筛选搜索获取这两个示例工作簿的下载链接。

2462 0

Linux查找和筛选工具

本文包含: 文件名通配符、命令中的正则表达式、查找文件工具 find、查找文本工具 grep、转换和删除重复命令 tr、合并和分割工具。 1. 文件名通配符单字符匹配元字符 ?...查找文件工具 find 基本格式 # find [path] [expression] 参数： depth：先从当前目录查找，然后再从当前目录的子目录中查找 maxdepth LEVELS：向下搜索到第...LEVELS层目录，LEVELS为0表示只在当前目录查找 mindepth LEVELS：至少向下搜索LEVELS层目录 mount：不搜索远程文件系统 follow：搜索如果遇到链接文件就连同链接所指向的文件一并查找...转换和删除重复命令 tr # tr [option] [string1] [string2] 参数 c：使用string1中字符的补集替换 d：删除string1中包含的所有字符 s：删除重复字符例如...合并和分割工具排序 sort # sort [option] [file] 参数 b：按字段进行分类并忽略前面的空格或制表符 d：按字典的顺序进行排序，将除空格和字母以外的字符排除 f：忽略大小写

3.6K4 0

VBA高级筛选应用：拆分或更新子工作表

标签：VBA，高级筛选下图1所示是一个简单的示例数据集。...其中心思想是创建一个唯一的工作表，其中包含与部门相关的数据。因此，这里会为A、B和C分别创建一个工作表。如果添加了任何新的部门，则也为这些部门创建新的工作表。...下面的VBA代码有两个作用，它首先创建一个唯一列表，然后基于该唯一列表使用高级筛选。高级筛选是一个很好的工具，因为它可以在不使用复制和粘贴的情况下完成上述操作。...高级筛选将列出唯一值项，并将其放在M列中。接下来，代码需要循环遍历该唯一列表，这里使用了一个简单的For循环，从第2行循环到M列中最后使用的行。...注意，在单元格N1输入有部门名称，这需要保留，因为高级筛选需要标题。

1.6K2 0

函数周期表丨筛选丨无丨USERELATIONSHIP

[1240] USERELATIONSHIP函数 USERELATIONSHIP函数是一个高阶函数，隶属“筛选”类函数，其本身并不能返回任何表或值，仅在计算时启动指定的关系。...例子模拟数据： [1240] 这是白茶随机模拟的数据，将其导入到PowerBI中，建立日期表，模型关系如下： [1240] 因为事实表中，有两列日期，白茶设定日期表对应下单日期，此时送达日期处于未激活的状态...这个时候送达数量要考虑的是送达日期，而下单数量的直接筛选是下单日期，二者计算上是完全冲突的。...此时用USERELATIONSHIP函数激活送达日期与日期表的关系，停止下单日期与日期表的关系可以完美解决这个问题。...首先是激活了，两个维度的筛选效果是一致的，出发点不符合关联交叉对比的需求；其次，是为了USERELATIONSHIP函数激活关系时，对A维度不造成影响。

1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭