首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

以下是一个示例代码:

代码语言:txt
复制
<!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
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

4分34秒

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

7分9秒

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

19分58秒

04-HTML中的table标签

44分12秒

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

1分11秒

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

2分3秒

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

36秒

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

42秒

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

9分28秒

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

16分37秒

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

7分54秒

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

5分5秒

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

领券