JavaScript 表格过滤器

最新推荐文章于 2024-04-26 16:52:50 发布
最新推荐文章于 2024-04-26 16:52:50 发布
阅读量1.5k 收藏 2
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/123909687
版权

在这篇教程博客中，我们学习了如何使用 JavaScript 在 HTML 表格中添加过滤器或搜索选项？

借助 HTML、CSS、JavaScript 创建 JavaScript 表格过滤器，然后我们可以从 HTML 表格中过滤数据。这里我们需要创建响应式 HTML 表格设计，如果您不知道如何设计请参阅响应式表格设计帖子，希望您能了解响应式 HTML 表格。

您已经在许多网站上看到，您可以在表格中搜索特定条件。大多数情况下，当用户设置一些条件然后过滤相应的数据时，您已经访问了任何网站后端仪表板。

本教程将指导您如何使用 JavaScript 在 HTML 表格中添加过滤器或搜索选项。使用这个程序，我们可以通过卷号、候选人姓名、电子邮件、费用和剩余天数等过滤特定的表格内容。我希望你将来能在任何地方学习和使用这个程序，因为这个程序是一个用于表格搜索的简短纯JavaScript 程序，因此我们可以创建高级搜索功能，但它展示了如何使用纯 JavaScript创建特定功能。

此外，我使用了Bootstrap 框架来创建表格布局，并在一些样式中使用了CSS样式。在这个表中我有一个最小数量的数据，您可以根据您的具体需要更改数据，这里的另一个选项是使用 JavaScript 代码。我希望你会喜欢Javascript 表格过滤程序。

因此，如果您实际上认为该 javascript 表格过滤器将如何查看，请查看下面给定视频中的预览，它仅显示该程序的预览。

查看 Javascript 表过滤程序输出预览

JavaScript表格过滤器源码说明

在这里，我将在解释完Javascript表格过滤器源代码之后分享源代码，让我们谈谈这个，我使用Bootstrap和CSS创建了HTML表格的布局设计。这些表基于<td>and <tr>，这也用于普通的HTML 表。我在过滤器字段中使用了 HTML 数据（获取信息）来进行属性搜索并缩短它们。在 CSS 文件中，我使用了较少的 CSS 代码，设置了一些元素的样式，如标题、表格行（奇数和偶数顺序）背景颜色，您可以在输出预览视频中看到，用于创建我使用 CSS :nth-of-type(奇数) & :nth-of-type (even) 属性。

因此，在 JavaScript 部分，我创建了一个名为的变量var TableFilter，并将所有函数放入该变量中。在 HTML 中，我们使用Data element存储自定义数据，然后 JavaSCript (JS) 使用.getAttribute该方法获取它。因此，现在，javascript使用调用的函数查找过滤文本。结果，如果任何数据与输入匹配，则显示结果。

为了创建这些程序，我们需要创建三个文件，第一个文件用于 HTML，第二个文件用于 CSS，第三个文件用于 JavaScript。我希望你能理解代码段并使用它。

第一步：创建名为“index.html”的 HTML 文件并将 HTML 代码放入文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Javascript Table Filter</title>
  <link href="css/stylesheet.css" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  
</head>
<body>
  <section class="container">
  <h1>For Table Filter Used CSS & JavaScript</h2>
   <input type="search" class="lighter-table-filter" data-table="table-info" placeholder="Filter/Search Here">
<table class="table-info table">
    <thead>
        <tr>
        <th>Roll No</th>
        <th>Candidate Name</th>
        <th>Email</th>
        <th>Fees Dues</th>
        <th>Remaing Days</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>1901</td>
        <td>John</td>
        <td>john04@gmail.com</td>
        <td>45000</td>
        <td>21</td>
    </tr>
    <tr>
        <td>1902</td>
        <td>Kayamat</td>
        <td>kam06@gmail.com</td>
        <td>46700</td>
        <td>18</td>
    </tr>
    <tr>
        <td>1903</td>
        <td>Yash Kumar</td>
        <td>yashkum@gmail.com</td>
        <td>34000</td>
        <td>14</td>
    </tr>
    <tr>
        <td>1904</td>
        <td>Charlies</td>
        <td>Charlies@gmail.com</td>
        <td>22000</td>
        <td>10</td>
    </tr>
    <tr>
        <td>1905</td>
        <td>Aman Dhawan</td>
        <td>amandhawan@gmail.com</td>
        <td>66000</td>
        <td>22</td>
    </tr>
    <tr>
        <td>1906</td>
        <td>Kuldeep senger</td>
        <td>senger09@gmail.com</td>
        <td>87000</td>
        <td>33</td>
    </tr>
    <tr>
        <td>1907</td>
        <td>Shyam singh</td>
        <td>shyma06singh@gmail.com</td>
        <td>11000</td>
        <td>41</td>
    </tr>
    <tr>
        <td>1908</td>
        <td>Hema Shankar</td>
        <td>shankarhema@gmail.com</td>
        <td>57000</td>
        <td>32</td>
    </tr>
    </tbody>
  </table>
</section>
<script  src="JS/function.js"></script>
</body>
</html>

第二步：创建名为“stylesheet.css”的CSS文件并将CSS代码放入文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
    font-family: 'Lato', sans-serif;
    margin-top: 25px;
}
h1{
    font-size: 35px;
    font-weight: 900;
}
input {
    width: 250px;
    height: 40px;
    float: right;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #212121;
}
table {
    margin-top: 75px;
}
tr:nth-of-type(odd) {
    background: #efebe7;
}
tr:nth-of-type(even) {
    background: #2ebd40;
}
thead {
    background: #2ac70e;
}

第三步：创建名为“function.js”的JS文件并将JS代码放入文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(function(document) {
  'use strict';
  var TableFilter = (function(Arr) {
    var _input;
    function _onInputEvent(e) {
    _input = e.target;
    var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
    Arr.forEach.call(tables, function(table) {
    Arr.forEach.call(table.tBodies, function(tbody) {
    Arr.forEach.call(tbody.rows, _filter);
    });
    });
    }
    function _filter(row) {
    var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
    row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }
    return {
    init: function() {
    var inputs = document.getElementsByClassName('lighter-table-filter');
    Arr.forEach.call(inputs, function(input) {
    input.oninput = _onInputEvent;
    });
    }
    };
  })(Array.prototype);
  document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
    TableFilter.init();
    }
  });
})(document);

因此，请参阅创建JavaScript 表过滤器的代码段。您将成功创建。

 

allway2
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery 过滤器(first,last,not,even,odd)的使用
10-26
Jquery 过滤器，顾名思义就是过滤一些不需要的元素，主要有first,last,not,even,odd等等，下面有个使用示例，大家可以感受下
（翻译）表格过滤器模式（Table Filter）
gc_2299的博客
07-24 2937
问题概述   用户想按列对表格中的数据进行分类过滤
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用，JS中数组过滤器的使用详解（附实际应用代码）
最新发布
RenGJ010617的博客
04-26 3141
用array.filter(）来实现数据筛选、数据清洗和链式调用，相对于for循环更加清晰，语义化强，能显著提升代码的可读性和可维护性。
Vue Table过滤 filter
Bryan_liu0322的博客
02-04 1900
Vue Table过滤 一个可以有多种方法查询的表格 可以通过datepicker来选择查询，或者通过相似的input输入框来查询 <template> <div> <el-select v-model="selection" placeholder="请选择查询方式"> <el-option style="margin-bottom: 30px; margin-right: 30px" v-for="item
html过滤检索类似excel,利用jQuery实现仿Excel表格排序筛选代码
weixin_31000273的博客
06-09 776
特效描述：利用jQuery实现 仿Excel表格 排序筛选代码，利用jQuery实现仿Excel表格排序筛选代码代码结构1. 引入CSS2. 引入JS3. HTML代码Table 1AnimalClassCollective NounA NumberBearMammalSleuth1AntInsectArmy2SalamanderAmphibianCongress3OwlBirdParliamen...
在v-html中，js 正则表达式清除字符串里的style属性
10-17 801
项目中遇到这样的需求，后端返回的是字符串，在vue用v-html显示，里面有style样式，要去除style 在v-html中使用filters，和平时的不一样，推荐项目的方法，定义一个全局的过滤方法 1 Vue.prototype.removeHtmlStyle = function (html) { 2 var rel = /style\s*?=\s*?([‘"])[\...
vue+elementui的el-table下filters过滤器的使用 小白
weixin_45890414的博客
11-27 8887
vue+elementui的el-table下filters过滤器的使用 小白 <el-table-column prop="sex" label="性别" :filters="filterList" :filter-method="handleFilterChange"> <template slot-scope="scope"> {{sexValue[scope.row.mold]}} </te
vue实现表格过滤功能
10-16
在Vue.js中，实现表格过滤功能是常见的需求，特别是在数据展示和用户交互中。这个功能允许用户通过输入关键词快速筛选出符合特定条件的数据项。在给出的代码示例中，我们看到了一个简单的表格过滤和排序功能的实现。...
33种Javascript 表格排序控件收集
10-29
10. Javascript Table Sorter（10）：一个简单的JavaScript表格排序器，适合快速实现基本的排序功能。 11. Sort ‘n Scroll Table JavaScript（11）：此脚本结合滚动条，实现了表格排序和滚动同步，提高了大型数据...
JQuery选择器、过滤器大整理
10-24
本文将深入探讨jQuery中的选择器和过滤器，它们是jQuery库中用于高效选取DOM元素的关键工具。 **一、jQuery选择器** jQuery选择器基于CSS选择器，同时还引入了一些特有的选择方式。以下是一些基本的jQuery选择器：...
jQuery中可见性过滤器简单用法示例
12-09
本文实例讲述了jQuery中可见性过滤器简单用法。分享给大家供大家参考，具体如下： 一 介绍 元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此，可见性过滤器也...
tablefilter
01-20
oracle jdeveloper 11g
table-filter:基于 Bootstrap + JQuery 的 HTML 表格过滤插件
06-21
表过滤器 基于 Bootstrap + JQuery 的 HTML 表格过滤器插件，您只需将表格的 id 传递给 tableFilter.filter('id of the table') 方法，点击此按钮将打开一个过滤器弹出窗口 一个 二 1 三1 one2 二 2 三 2 一个3 二三 三三 one4 二 4 三四 one5 两个5 三五 one6 两个6 三6 one7 27 三七 We are done, just click on the button you will see filter popup. Thanks.
Vue2 & Vue3 二次封装element-ui table-Filter组件，分离过滤条件和表
qq_64036795的博客
05-21 763
起因是要做一个这样的功能：点击过滤按钮之后展开这些选项，然后点击搜索，为下面表格执行筛选数据的逻辑element-ui自带的表格过滤功能虽然强大，传递指定参数后就可以在表头出现一个下拉框然后过滤数据，但是我要做的不是这个效果啊qwq（鼠鼠调了两天ele最后才发现过滤只能出现在表头，怨念极重，我说怎么传这点就可以实现过滤了）然后这个过滤功能咋实现呢？目前还不知道，现在的思路是把这些收集好的过滤项，做成表单发请求传出去。
html表格根据查询条件去,bootstrap table filterBy数据刷选过滤器和查询条件
weixin_36051281的博客
06-09 1680
bootstrap table filterBy数据刷选过滤器和查询条件bootstrap table filterBy数据刷选过滤器，对表格数据进行刷选，比如找出ID为1、10 用户名为itxst的数据。注意这个方法只针对前端有效，如果要服务器后端刷选请参考我们的服务器端分页教程。filterBy方法参数名称filter刷选条件，如果刷选Id字段为1和10的数据{Id:[1,10]}option...
JavaScript实现表格过滤
不忘初心，方得始终
03-26 7984
用JavaScript实现表格过滤，设计一个Filterable Table。应用makeAllTablesFilterable之后，每个table附加一个输入域，用户输入字符之后，table中不包含这些字符的rows将消失，仅剩下含有相应字符的rows，并且相应字符会突出显示。 效果： js:
HTML中的table里面的元素排序
热门推荐
yangxin_blog的专栏
10-14 1万+
我们在上网中都能看到很多能够排序的，如大小，时间等 现在我们也试一下排序功能： 排序的函数代码：里面含有点击之后排序--还原，和排升序和降序 function sortAge(){ //对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序 var tabNode = document.getElementById("tabid");
wangeditor5过滤内容表格标签
06-13
可以使用wangEditor5提供的`filter`过滤器来过滤表格标签。 具体的代码实现如下： ```javascript // 创建编辑器实例 const editor = new wangEditor('#editor') // 注册过滤器 editor.config.filter = (html) => { // 去除表格标签 return html.replace(/<table[^>]*>[\s\S]*?<\/table>/g, '') } // 渲染编辑器 editor.create() ``` 在上面的代码中，我们注册了一个过滤器，用于过滤表格标签。具体过程是通过正则表达式匹配`<table>`标签，然后将其替换为空字符串，从而达到过滤表格标签的目的。 需要注意的是，这种方式仅仅是在渲染时过滤表格标签，而不是在提交表单时过滤表格标签。如果需要在表单提交时过滤表格标签，可以在提交表单前使用相同的过滤器过滤表单内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值