开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS进阶11-表格table

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。）

02

datatables应用程序接口API

Datatables有一个强大的api，用来处理表格上的数据，你可以添加数据到已经存在的表格，或者对已经存在的数据进行操作。 API旨在能够很好地操作表格中的数据。

03

JavaScript DOM操作表格及样式

一．操作表格

标签是HTML中结构最为复杂的一个，可以通过DOM来创建生成它（比较麻烦），或者HTML DOM来操作它。 //需要操作的table

css文字块-display行内元素块 inline-block 只给文字加背景

我们想要实现第二行的效果，所以用display: inline-block;给文字定义为行内元素块。只给第二行文字部分添加背景。

01

HTML学习记录及整理

<!DOCTYPE ”此文仅为个人学习的知识梳理，权威且更详细的内容请查阅w3school。“>

08

Day2:html和css

表格用table,tr代表表格中的一行,必须在table标签中,td用于表示表格中的单元格,

表格中的一行.

02

前端开发学习──初识Html

type：disc默认实心小圆圈；square 小方块；circle 空心小圆圈

02

HTML入门的简单学习

1：HTML简介 1.1：HTML(Haper Text Markup language):超文本标记语言超文本就是指页面内可以包含图片，链接，甚至音乐，程序等非文字元素

javascript dom学习笔记

http://blog.csdn.net/zhoulenihao/article/details/11099455

01

HTML基础下

知识点一： HTML5的标准结构： <!DOCTYPE html> <html lang='en'> <head> <meat charset='utf-8'> <title>Docu

06

html标签详解

<!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!DOCTYPE html> <head>内的标签标签意义 <title></title> 定义网页标题 <style></style> 定义内部样式表 <script></script> 定义JS代码或引入外部JS文件 <link/> 引入外部

从零开始学 Web 之 HTML（三）表单

table>tr3>td5 + tab键

03

【Python3】HTML基础

BS(Browser-Server)模式：顾名思义为浏览器-服务器的意思，对比的话类似我们PC上面浏览器使用的产品即为BS模式产品，例如google doc、各类网站等。

01

HTML 入门笔记－初识HTML

基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>标题标签</title></head><body>

了不起的盖茨比

《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》

05

html学习笔记（一）

单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>

05

HTML基础

HTML基础 ---- HTML基本知识与结构 HTML常见标签标签写法与嵌套的讨论 HTML、CSS、javascript三者的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的

04

HTML基础

一 html html结构 !DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档 <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是

05

JS-DOM 综合练习-动态添加删除班级成绩表

费了2个小时，才把原理弄懂，把问题逐个解决，当你发现你最后栽的那个点，是一个小石头拌的你，你起来是该哭还是该笑呢？只怪自己习武不精吧。虽然问题都解决了，但是还有一个余留的问题就是鼠标经过input时，怎么修改背景颜色的问题。这一节有点乱，虽然整理的代码编了问题序号。可我相信，再过几天自己回头看肯定还是一头雾水。 so,附上具体问题网址：http://www.imooc.com/code/1636 以下是html整件 <!DOCTYPE html> <html> <head> <meta chars

08

（续）很久很久以前学的，16个HTML笔记

超链接分为外部链接、内部链接、文本链接、图片链接、下载链接、空链接、电子邮件链接等。

03

17.HTML

HTML简介 htyper text markup language 即超文本标记语言。超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。标准模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

07

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭

人员表
姓名	性别	年龄
汤高	男	20