如何在HTML中搜索表中的数据

在HTML中搜索表中的数据可以通过以下步骤实现：

使用HTML表格标签 <table> 创建一个表格，并使用 <tr> 和 <td> 标签创建行和单元格。
在表格上方或下方添加一个搜索框，可以使用 <input> 标签创建一个文本输入框，并设置一个唯一的ID。
使用JavaScript编写一个函数，该函数将在用户输入时触发。可以使用 oninput 事件监听输入框的变化。
在JavaScript函数中，获取输入框的值，并将其与表格中的每一行进行比较。
使用JavaScript的DOM操作，可以使用 querySelectorAll 方法选择所有的表格行，并使用 forEach 方法遍历每一行。
在遍历的过程中，可以使用 querySelector 方法选择每一行中的单元格，并使用 textContent 属性获取单元格中的文本内容。
将获取到的文本内容与输入框的值进行比较，可以使用 indexOf 方法判断是否包含输入框的值。
如果匹配成功，可以使用CSS的 display 属性将匹配的行显示出来，或者使用其他样式进行标记。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>搜索表格数据</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <input type="text" id="searchInput" oninput="searchTable()">
  <table id="dataTable">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>广州</td>
    </tr>
  </table>

  <script>
    function searchTable() {
      var input = document.getElementById("searchInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("dataTable");
      var rows = table.getElementsByTagName("tr");

      for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].getElementsByTagName("td");
        var found = false;

        for (var j = 0; j < cells.length; j++) {
          var cell = cells[j];
          if (cell.textContent.toUpperCase().indexOf(filter) > -1) {
            found = true;
            break;
          }
        }

        if (found) {
          rows[i].style.display = "";
        } else {
          rows[i].style.display = "none";
        }
      }
    }
  </script>
</body>
</html>

这段代码创建了一个包含姓名、年龄和城市的表格，并在表格上方添加了一个搜索框。当用户在搜索框中输入内容时，JavaScript函数 searchTable() 将会被触发。函数会遍历表格中的每一行，并将输入框的值与每一行的单元格进行比较。如果找到匹配的内容，对应的行将会显示出来，否则将会隐藏起来。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在HTML中搜索表中的数据

相关·内容

MySQL教程-46-修改表中的数据

MySQL教程-47-删除表中的数据

04-HTML中的table标签

03-尚硅谷-HTML-HTML中的基础标签

Adobe认证教程：如何在 Adobe Photoshop 中制作拉伸的风景？

小白教程:如何在Photoshop中制作真实的水波纹效果？

PS使用教程：如何在Mac版Photoshop中画出对称的图案？

如何在网页中嵌入Excel控件，实现Excel的在线编辑？

31-linux教程-linux中关于搜索的命令locate

30-linux教程-linux中关于搜索的命令find

MySQL教程-09-查看表结构以及表中的数据

MySQL教程-44-向表中插入数据

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

如何在HTML中搜索表中的数据

MySQL教程-46-修改表中的数据

MySQL教程-47-删除表中的数据

04-HTML中的table标签

03-尚硅谷-HTML-HTML中的基础标签

Adobe认证教程：如何在 Adob​​e Photoshop 中制作拉伸的风景？

小白教程:如何在Photoshop中制作真实的水波纹效果？

PS使用教程：如何在Mac版Photoshop中画出对称的图案？

如何在网页中嵌入Excel控件，实现Excel的在线编辑？

31-linux教程-linux中关于搜索的命令locate

30-linux教程-linux中关于搜索的命令find

MySQL教程-09-查看表结构以及表中的数据

MySQL教程-44-向表中插入数据

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Adobe认证教程：如何在 Adobe Photoshop 中制作拉伸的风景？