Question

我正在尝试创建一个搜索栏来搜索表格中的值。下面是我的html表代码。但我不知道如何在html中创建搜索栏来搜索值。请看图片我想要实现的目标。谢谢

<!DOCTYPE html>
<html>
<body>

<h1>Customer Data</h1>

<table border="1">
  <tr>
  <th>Customer ID</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Gender</th>
    <th>Phone</th>
    <th>Email</th>
    <th>Address</th>
    <th>Zip</th>
    <th>Date of Birth</th>

  </tr>

  <tr>
    <td>C1121</td>
    <td>James</td>
    <td>Bill</d>
    <td> Male </td>
    <td>123456789</td>
    <td>J@gmail.com</td>
    <td></td>
    <td> </td>
    <td>09/02/1999</td>
  </tr>

  <tr>
    <td>C54</td>
    <td>Sarah</td>
    <td>Sean</d>
    <td> Female </td>
    <td></td>
    <td></td>
    <td>abc street</td>
    <td>00000</td>
    <td>01/26/1992</td>
  </tr>

</table>

</body>
</html>

Answer 1

您需要使用JavaScript通过搜索输入添加过滤功能。不幸的是，单凭HTML无法做到你想要的。

这是一个great link，详细说明如何使用一些简单的JavaScript创建过滤/搜索HTML元素，而不是其他库。它似乎正是您正在寻找的，但您必须进行一些细微的更改，因为您想要过滤表元素，并且您的行彼此不相关，这将使您的解决方案更加复杂。但这是一个很好的起点。

创建一个搜索栏以从HTML中的表中搜索值

1 个答案: