在这篇教程博客中，我们学习了如何使用 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 表过滤器的代码段。您将成功创建。
扫一扫
3014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
