JavaScript 表格过滤器

谁践踏了优雅 2023-09-30 12:31 1阅读 0赞

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

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

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

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

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

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

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

### **JavaScript表格过滤器源码说明** ###

在这里，我将在解释完Javascript表格过滤器源代码之后分享源代码，让我们谈谈这个，我使用Bootstrap和CSS创建了HTML表格的布局设计。这些表基于`<td>`and `<tr>`，这也用于普通的**HTML 表**。我在过滤器字段中使用了 HTML 数据[（获取信息）][Link 2]来进行属性搜索并缩短它们。在 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 代码放入文件中** ####

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

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

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

[CSS]: https://www.tutorialscan.com/css/css-dialog-box/
[Link 1]: https://www.tutorialscan.com/css/css-responsive-table/
[JavaScript]: https://developer.mozilla.org/en-US/docs/Web/JavaScript
[CSS 1]: https://www.tutorialscan.com/css/animation-css-input-label/
[Link 2]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
[javascript]: https://www.tutorialscan.com/css/css-dropdown-option/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/751406ffdcda4eae8e466b60fbf5453d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16