大多数在表格中显示数据列表的网站通常都实现了某种过滤功能。这可以帮助用户根据他们在表格输入中输入的文本来过滤相关项目。
在这个快速教程中，我们将建立一个响应式的可过滤表，它看起来像这样。
一个按编程语言过滤的响应式表格
该表将包含一个开发人员的列表。每一行都包含一个名字，一个年龄，和编程语言。当用户在输入字段中输入时，该表将过滤并返回与输入值匹配的行。
在建立这个表格的过程中，你将学习一些CSS属性，以及用JavaScript访问/操纵DOM。
你可以从CodePen获得示例代码。
开始使用
你将需要在你的项目文件夹中创建三个简单的文件。它们是：index.html 用于HTML标记，styles.css 用于样式表，index.js 用于脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Filterable Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
请确保将你的样式表和脚本文件连接起来，就像我在上面的HTML中所做的那样。
表格的HTML标记
在body 标签内添加以下标记。
<div class="app">
<input type="text" id="searchInput" placeholder="filter developer...">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<tbody id="names">
<tr>
<td>Kingsley</td>
<td>32</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Samuel</td>
<td>22</td>
<td>Python</td>
</tr>
<tr>
<td>Joyce</td>
<td>28</td>
<td>Ruby</td>
</tr>
<tr>
<td>Jake</td>
<td>29</td>
<td>Python</td>
</tr>
<tr>
<td>Daniel</td>
<td>40</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Mary</td>
<td>21</td>
<td>C</td>
</tr>
<tr>
<td>David</td>
<td>26</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Kelly</td>
<td>31</td>
<td>React</td>
</tr>
<tr>
<td>Cleo</td>
<td>43</td>
<td>Java</td>
</tr>
<tr>
<td>Peter</td>
<td>19</td>
<td>Vue</td>
</tr>
<tr>
<td>George</td>
<td>59</td>
<td>Cobol</td>
</tr>
<tr>
<td>James</td>
<td>29</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Ethan</td>
<td>22</td>
<td>PHP</td>
</tr>
<tr>
<td>Sandra</td>
<td>29</td>
<td>R</td>
</tr>
<tr>
<td>Pires</td>
<td>34</td>
<td>React Native</td>
</tr>
<tr>
<td>Martha</td>
<td>30</td>
<td>React</td>
</tr>
</tbody>
</table>
</div>
第一个元素是表单输入。我们将用它来收集用户的数据。
然后我们有一个表格。表格由一个标题（thead ）和一个主体（tbody ）组成。头部有一行数据(tr)，这是标题。主体有16行数据，每行由姓名、年龄和编程语言组成。
我们把这两个元素都包在一个父标签div 。它们将帮助我们实现对齐，我们将在后面的CSS中看到。
保存文件并在网络浏览器上打开该应用程序。
表格HTML
如何用CSS为表格设置样式
我们现在将对表格进行一些样式设置。首先，我们像这样设置基本样式。
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");
/* Set no margin and padding around body. Set height to take up entire screen height. Align everything to the center, both horizontally and vertically */
body {
margin: 0;
height: 100vh;
padding: 0;
font-family: "lato", sans-seriff;
display: grid;
justify-content: center;
align-items: center;
font-size: 20px;
}
/* Remove border and outline around input. Set width to take up the entire width of parent and set margin on bottom */
#searchInput {
border: none;
outline: none;
width: 100%;
margin-bottom: 20px;
}
/* When input gains focus, add a blue border below it */
#searchInput:focus {
border-bottom: 2px solid #4575b6;
}
表格将被对齐到中心。
居中对齐的表格
为了使表格看起来更好，我们可以使用以下样式规则。
/* Sets width of table container (div) to 80% of browser window's width and the height to 100% of window's height. `vh` and `vw` makes the table responsive because it scales along with screen size. Also set margin of 20px to top and bottom */
.app {
width: 80vw;
height: 100vh;
margin: 20px 0;
}
/* Collapse all borders separating each cell. Table takes up entire width of .app. Set gray shadow around table */
table {
border-collapse: collapse;
width: 100%;
box-shadow: 0 5px 7px gray;
}
/* Set shadow on just the table head */
thead {
box-shadow: 0px 0px 10px gray;
}
/* Add some space around table heading. Align text to right and transform to uppercase */
th {
padding: 1rem 3rem;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
}
/* Add padding on each cell */
td {
padding: 0.5rem 3rem;
font-size: 1rem;
}
/* Create alternating color(blue) across the rows. Set blue on all even ones (2, 4, 6 ...) */
tr:nth-child(even) {
background-color: #dee8f5;
}
现在我们的表格看起来更好一些，而且也是响应式的。
表格现在是响应式的
如何用JavaScript实现过滤器的功能
在这一点上，表格几乎是静态的。使用JavaScript，我们将根据用户在表单字段中输入的内容来实现过滤名字的逻辑。
在你的脚本文件中，定义一个名为filter 的函数。在前三行中，我们访问用户的输入值，将表体<tbody> 传递到变量names ，最后从<tbody> 里面访问所有的表行<tr> 。
我们还将数值改为大写，以确保一切都一致（用户可能输入'j'而不是'J'）。
/* This function will check for the user's input and based on that will either hide or display a particular row */
function filter() {
// Access text value and elements from the DOM
let value = document.getElementById("searchInput").value.toUpperCase();
let names = document.getElementById("names");
let rows = names.getElementsByTagName("tr");
// Code continues
接下来，我们循环浏览每个数组。对于每一行，我们访问最后一列（语言列）并获得其文本内容（实际值）。
for (i = 0; i < rows.length; i++) {
let column = rows[i].getElementsByTagName("td")[2];
let language = column.textContent;
rows[i].style.display =
language.toUpperCase().indexOf(value) > -1 ? "" : "none";
}
}
document.getElementById("searchInput").addEventListener("keyup", filter);
循环浏览表的行
如果表中的实际字符串值包含用户输入的任何数值，我们就显示该行。否则，我们就隐藏它。我们还使用了三元操作符来缩短条件语句的长度。
最后，我们在输入上添加一个事件监听器。每当按键被释放，过滤器就会被调用。
下面是完整的代码。
function filter() {
let value = document.getElementById("searchInput").value.toUpperCase();
var names = document.getElementById("names");
var rows = names.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
let column = rows[i].getElementsByTagName("td")[2];
let language = column.textContent;
rows[i].style.display =
language.toUpperCase().indexOf(value) > -1 ? "" : "none";
}
}
document.getElementById("searchInput").addEventListener("keyup", filter);
你的表格最后看起来应该与此相似。
总结
只需使用HTML、CSS和JavaScript，你就可以创建一些具有高级功能的真正的时尚元素。
我希望你能从这里学到一两点东西。再一次，你可以在CodePen上查看代码，并根据你的喜好进行调整。
谢谢你的关注。
网络开发人员。技术撰稿人。教育工作者。自由职业者。科技界的非洲人。我写关于网络/软件开发的教程。我的个人博客在 - ubahthebuilder.tech。要有爱心。始终微笑!
如果你读到这里，请发推特给作者，向他们表示你的关心。鸣谢
FreeCodeCamp的开源课程已经帮助超过40,000人获得了开发者的工作。开始吧
