开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现表格搜索功能

要在JavaScript中实现表格搜索功能，你可以使用以下步骤：

基础概念

DOM操作：用于访问和修改HTML文档中的元素。
事件监听：用于响应用户的输入或其他动作。
字符串匹配：用于检查搜索词是否出现在表格数据中。

相关优势

用户体验：使用户能够快速找到所需信息。
交互性：增强网页的动态性和互动性。
灵活性：可以根据不同的需求定制搜索逻辑。

类型

简单文本搜索：基于简单的字符串匹配。
正则表达式搜索：使用正则表达式进行更复杂的模式匹配。
模糊搜索：允许用户输入近似值来查找数据。

应用场景

数据管理界面：在管理大量数据的网页中。
电子商务网站：帮助用户快速定位商品。
文档管理系统：便于用户检索文档信息。

实现步骤

HTML结构：创建一个表格和一个搜索框。
JavaScript逻辑：编写脚本来处理搜索请求并更新表格显示。

示例代码

以下是一个简单的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Search</title>
<style>
  .hidden { display: none; }
</style>
</head>
<body>

<input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Search for names..">

<table id="dataTable">
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
  </tr>
  <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
  </tr>
  <!-- More rows here -->
</table>

<script>
function searchTable() {
  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]; // Check the first column
    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>

遇到的问题及解决方法

性能问题：如果表格非常大，搜索可能会变慢。可以通过分页或延迟加载来优化。
大小写敏感：上述示例是大小写不敏感的。如果需要大小写敏感的搜索，可以去掉.toUpperCase()调用。
多列搜索：如果需要在多个列中进行搜索，可以在for循环中添加更多的td检查。

解决方法示例（多列搜索）

for (i = 0; i < tr.length; i++) {
  var found = false;
  td = tr[i].getElementsByTagName("td");
  for (var j = 0; j < td.length; j++) {
    txtValue = td[j].textContent || td[j].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      found = true;
      break;
    }
  }
  if (found) {
    tr[i].classList.remove("hidden");
  } else {
    tr[i].classList.add("hidden");
  }
}

通过这种方式，你可以实现一个基本的表格搜索功能，并根据需要进行扩展和优化。

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

有帮助

没帮助

相关·内容

使用React Hooks实现表格搜索功能

表格搜索功能在很多表格中,数据量是一次性直接返回的,如果增加一个搜索输入框+搜索按钮的话有点笨重,可以直接在表头位置增加搜索按钮在表格所在组件中实现这个功能直接编写代码就行了,但是如果有多个表格需要使用到该功能...这个方法返回一个包含多个属性和方法的对象，用于配置表格搜索功能。 filterDropdown 返回一个包含搜索输入框和两个按钮的div元素。...实现具体的搜索逻辑。...render 渲染表格中的每一行数据。...import { Input, Button, Icon } from 'antd'; import Highlighter from 'react-highlight-words'; /* * 表格搜索

3322 0

JS示例28-表格搜索search

document.getElementById('name'); // 姓名 var oSearchBtn = document.getElementById('search'); // 搜索..." name="name" id="name" value="张三" /> 搜索..." /> 搜索结果高亮显示

6.5K1 0

ElementUI实现表格分页功能

device-width, initial-scale=1.0"> 表格数据分页...table_list.length"> js2.0.../vue/v2.5.16/vue.js"> js2.0/element-ui/2.12/lib.../theme-chalk/index.js"> new Vue({ el: '#vue', data: {

1.4K1 0

vue实现表格组件（实现多选功能）

其中多选功能参考：https://jsfiddle.net/muchen/7r358jmu/2/ 来个效果名称|年龄|性别 –|–|– 张三|11|男李四|12|女王五|13|- 当然，上诉只是要实现的效果...，还要再加上多选功能浅谈表格表格组件比较没有技术含量，主要掌握vue的v-for的使用就可以了，但是多选功能却比较复杂，然而这个复杂的问题却被上述网址所展示的代码优雅的解决了，所以这个组件会是一个非常值得学习的代码...主要讲多选哈，其他的就带过了多选功能如https://segmentfault.com/q/1010000006893364?...给每个数据增加一个属性，selected 在 computed 里面增加一个 allSelected 的计算属性定义该属性的 get & set 把allSelected 绑定到 thead 的 checkbox 上实现的效果...---- ---- 另外，分页组件，请查看本人另一篇文章vue实现分页组件

3.4K2 0

vue实现表格组件（实现多选功能）

其中多选功能参考：https://jsfiddle.net/muchen/7r358jmu/2/ 来个效果名称|年龄|性别 –|–|– 张三|11|男李四|12|女王五|13|- 当然，上诉只是要实现的效果...，还要再加上多选功能浅谈表格表格组件比较没有技术含量，主要掌握vue的v-for的使用就可以了，但是多选功能却比较复杂，然而这个复杂的问题却被上述网址所展示的代码优雅的解决了，所以这个组件会是一个非常值得学习的代码...主要讲多选哈，其他的就带过了多选功能如https://segmentfault.com/q/1010000006893364?...给每个数据增加一个属性，selected 在 computed 里面增加一个 allSelected 的计算属性定义该属性的 get & set 把allSelected 绑定到 thead 的 checkbox 上实现的效果...---- ---- 另外，分页组件，请查看本人另一篇文章vue实现分页组件

1.2K4 0

JavaScriptCSS制作一个简易表格搜索功能

如何使用 JS/CSS 实现表格搜索或过滤功能。...www.taobao.com Baidu www.baidu.com 以下搜索搜索框和联想菜单的样式.../* 每一行设置底部边框*/ border-bottom: 1px solid #ddd; } .myTable tr.header, #myTable tr:hover { /* 表格头部设置背景...*/ background-color: #f1f1f1; } 以下是搜索搜索框和联想菜单的 JavaScript 代码：基础的js示例搜索第二列，可以将 tr[i].getElementsByTagName('td')[0] 中的 [0] 变为 [1]。

1.9K2 0

前端js实现打印（导出）excel表格

产品原型：图片.png 功能需求：点击导出考勤表格按钮，会自动下载成Excel格式图片.png 图片.png jsp页面代码：导出考勤表 js代码 //打印表格 var...导出考勤表格...13661725475 //打印表格

9.8K2 1

JS 可编辑表格的实现

1、实现效果用户点击语文，数学，英语部分的单元格，可以实现分数的编辑，总分也会随之变化。...先看下效果，如图： 2、设计思路先通过HTML5+CSS3绘制表格，添加input的样式和err提示动画。给要修改的数据的单元格添加name属性，给总分那一列的单元格添加rname属性。...link rel="stylesheet" href="table.css"> 可编辑表格...> js...; cursor: pointer; padding: 10px 12px; font-size: 14px; text-align: center; } table.js

8.4K2 0

Js实现list导出为excel表格

initial-scale=1.0"> Document 导出excel表格...function exportEx() { let str = `时间,姓名,地址\n`; var jsonData = tableData //增加\t为了不让表格显示科学计数法或者其他格式

13.7K2 0

小程序引入搜索框实现搜索功能

业务描述在小程序中我们查询数据量较大较多时候需要对查询条件进行限制从而筛选数据这个时候我们就需要用一个搜索框的功能来实现搜索数据的功能实现步骤引入vant搜索框组件在page.json页面引入组件...van-button": "@vant/weapp/button/index", "van-search": "@vant/weapp/search/index" }, 页面使用组件在wxml页面中使用该搜索组件

2.6K2 0

前端js实现打印（导出）excel表格

产品原型：图片.png 功能需求：点击导出考勤表格按钮，会自动下载成Excel格式图片.png 图片.png jsp页面代码：导出考勤表 js代码 //打印表格 var...导出考勤表格...13661725475 //打印表格

9.7K2 0

JS实现分页功能

分页在网页上是一个很常见的功能，今天我们来实现一个新闻列表，包含了分页的功能，效果如下：那么如何来实现这个功能呢？...asAll = pagination.querySelectorAll('a'); //页面刚进来时第一页高亮 asAll[p-1].classList.add('active'); 5，选择页数，实现点击某页就到哪页的功能...p=index+1; //点击页数，改变p的值，以改变这个页面要显示的数据，达到分页的效果 render(); //重新渲染页面 } }); 6，按enter键实现跳转到某页的功能...classList.add('active'); if( p>asAll.length){ return; }//重新渲染页面render(); } }; 7，实现上一页下一页的功能...asAll.length){ return; } p=p+1; changePageClass(); render(); } 到此为止，一个传统的分页功能就实现了

16.1K2 0

JQ实现表格全选、反选功能

下面代码是使用JQ，实现表格列表的全选和反选功能，实际较为简单，主要做为教学使用：表格全选...class="form-control" id="reverse_election">全选 js.../jquery.min.js"> js/bootstrap.min.js"> $("

1.4K1 0

js分页功能实现

实现一个js的分页并在弹出框中显示 1.分页插件使用：bootstarp-paginator.js,需要先引入bootstarp.js和jquery.js等； !...numberOfPages : 0, bootstrapMajorVersion:3 } 其中 bootstrapMajorVersion的值需要根据实际情况配置； 3、列表展示实现

4.6K1 0

用原生js给网站写个搜索功能

本文也算是一篇教程，可以给 hugo 网站加个搜索功能，并且实现热更新，体验感更好。...2. js代码在 /layouts/_default 新建一个模板文件 search.html，大致的结构参考其他模板文件，然后写入我们需要的内容。...searchTerm" autocomplete="off" oninput="initiateSearch()"> 请输入关键词进行搜索... 然后通过一个 get 请求获取json文件，传入关键词参数，生成搜索列表。...--- slug: search title: 搜索 layout: search --- 写了一个基础的样式，可以直接使用。

3504 0

Vue 实现表格搜索、固定表头与排序原

在搜索完，删除搜索内容后展示所有的内容，用computed就比较容易实现，思路：v-model绑定搜索关键字，在tbody的tr上v-for循环计算属性。...methods也可以实现需要改成 <!...return items1 } } }) 如果配合Element UI表格插件实现搜索...，排序与固定表头与表格左列 js"> js"> <!

2.5K3 0

QML 用QSortFilterProxyModel实现搜索功能

engine->load(QUrl(QLatin1String("qrc:/main.qml"))); return app.exec(); } qml部分的代码： Search是自己写的一个搜索框...findBookDialog onSearch: { proxyModel.filterRole=range;//这个filterRole是proxyModel搜索的范围...，也就是指定BookModel中的一个属性 proxyModel.setFilterFixedString(text);//设置搜索内容 bookView.model...=proxyModel;//设置展示的内容为搜索筛选后的 } onRejected: {//取消时显示原来的内容 bookView.model=bookModel

1.6K1 0

django 实现简单的搜索功能

搜索是一个复杂的功能，但对于一些简单的搜索任务，我们可以使用 django model 层提供的一些内置方法来完成。...本文将结合 django 模型管理器的 filter 方法和 icontains 查询表达式来实现一个简单的搜索功能。以博客为例，博客文章通常包含标题和正文两个部分。...服务器将查询结果返回给用户整个过程就是这样，下面来看看 django 如何用实现这些过程。...urls.py urlpatterns = [ # 其他 url 配置 url(r'^search/$', views.search, name='search'), ] ---- 当然这样的搜索功能是非常简略的...使用它我们可以实现更加复杂的搜索功能，比如全文检索、按搜索相关度排序、关键字高亮等等类似于百度搜索的功能，功能十分强大。

12.4K8 0

Jekyll 静态博客实现搜索功能

一、安装 Simple-Jekyll-Search ---- npm 安装（需要 Node.js 环境） npm install simple-jekyll-search 或者 bower..."date" : "" } % unless forloop.last %,% endunless % % endfor % ] 三、将以下代码放置在要显示搜索的页面中..."> 3.3 配置代码 js">{title}', // 文章列表模板 noResultsText: '没有搜索到文章...', // 无搜索数据提示语 limit: 20, // 返回最大文章数 fuzzy: false // 是否模糊匹配 }) 四、参考链接 ---- https://github.com

1.9K4 0

angular使用管道实现搜索功能

之前在没学精angular的时候,想实现搜索功能的时候,总是想着从数据库里获取搜索的结果,可殊不知,原来在angular中只需要简单的几行代码就实现了最常用的搜索功能....下面就来说说如何实现: 1. export class person{ constructor( public name:string, public age:number ){...filterField] console.log(val); return val >=keyword }); } } 这个过滤需要两个参数,第一个参数:是依据哪个参数来搜索

4.1K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭