查找表格中文本并平滑地滚动到表格上的位置，并突出显示此行

要在网页上实现查找表格中的文本并平滑滚动到相应位置，同时突出显示该行，你可以使用HTML、CSS和JavaScript来完成这个任务。以下是一个简单的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Scroll and Highlight</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="searchInput" onkeyup="searchAndScroll()" placeholder="Search for names..">
<table id="dataTable">
  <tr><th>Firstname</th><th>Lastname</th></tr>
  <tr><td>John</td><td>Doe</td></tr>
  <tr><td>Jane</td><td>Doe</td></tr>
  <!-- Add more rows as needed -->
</table>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.highlight {
  background-color: yellow;
}

JavaScript (script.js)

function searchAndScroll() {
  const input = document.getElementById('searchInput');
  const filter = input.value.toUpperCase();
  const table = document.getElementById('dataTable');
  const trs = table.getElementsByTagName('tr');

  for (let i = 0; i < trs.length; i++) {
    const tr = trs[i];
    let found = false;
    for (let j = 0; j < tr.cells.length; j++) {
      const td = tr.cells[j];
      if (td) {
        const txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          found = true;
          break;
        }
      }
    }
    if (found) {
      tr.classList.add('highlight');
      tr.scrollIntoView({ behavior: 'smooth', block: 'center' });
    } else {
      tr.classList.remove('highlight');
    }
  }
}

解释

HTML: 创建一个输入框和一个表格。输入框用于输入搜索关键词，表格包含要搜索的数据。
CSS: 定义基本的表格样式，并设置高亮行的背景颜色。
JavaScript:
- searchAndScroll 函数在每次按键时被调用。
- 获取输入框的值并转换为大写以便不区分大小写搜索。
- 遍历表格中的每一行，检查每个单元格的内容是否包含搜索关键词。
- 如果找到匹配项，则添加 highlight 类到该行，并使用 scrollIntoView 方法平滑滚动到该行。
- 如果没有找到匹配项，则移除 highlight 类。

应用场景

数据密集型网页: 当网页包含大量数据并且用户需要快速定位特定信息时。
报告和仪表板: 在展示复杂数据和报告的页面中，帮助用户快速找到关键信息。
长列表: 对于包含许多项目的列表，如产品目录或联系人列表，这个功能非常有用。

可能遇到的问题及解决方法

性能问题: 如果表格非常大，遍历所有行可能会导致性能问题。可以通过分页或虚拟滚动来优化。
兼容性问题: scrollIntoView 的 smooth 行为可能在某些旧浏览器中不受支持。可以使用 polyfill 或自定义动画来解决。
样式冲突: 确保 .highlight 类不会与其他样式冲突，可以通过更具体的选择器或增加权重来解决。

通过这种方式，你可以为用户提供一个友好的界面来搜索和定位表格中的信息。

查找表格中文本并平滑地滚动到表格上的位置，并突出显示此行

、、、

我有一个简单的表，其中包含一些数据，我想根据日期滚动到一个特定的位置&突出显示该行，并根据是哪一天的斋月。假设是在25-04-2021上的13个赎月，那么我必须滚动到那个位置，并用红色或任何其他颜色突出显示行。到目前为止，我正在查找文本并更改颜色，我也在为scroll执行同样的

浏览 12提问于2021-04-06得票数 0

回答已采纳

1回答

使用Outlook将数据插入SharePoint表(如何加快处理速度？)

、、、

我编写了一个宏，它从电子邮件中获取一些数据，然后将这些数据安装到SharePoint表中。还是执行速度慢只取决于互联网连接/薄弱的计算机？或者你有没有其他的解决方案来解决主要的问题？(删除电子邮件正文并将其插入SharePoint列表)

浏览 2提问于2018-07-11得票数 0

回答已采纳

2回答

查找特定格式的文本并将其删除

、

我有一个很大的google文档文件，超过100页(包括表格等)，该文档中有一些参考文本在多个位置被突出显示为“灰色”，我希望有一个函数可以在表格或段落中找到那些颜色/样式并删除它。所以第一步是找到它，然后一次删除(从文档中删除这些文本)。我们如何在MS Word中创建自定义样式并将这些样式分配给那些“备注文本”(灰色)，在VBA中我们查找</em

浏览 3提问于2022-08-08得票数 0

8回答

在视图显示前立即滚动到表中的行

、、、、

一个带有表格的视图被推到屏幕上，我希望它在屏幕实际显示之前滚动到表格中的某一行。我在最终的视图控制器中使用此代码。scrollToRowAtIndexPath:scrollToPath atScrollPosition:UITableViewScrollPositionTop animated:NO]; 当我把它放到viewDiDAppear方法中时，它会从表格的初始位置<

浏览 0提问于2010-05-29得票数 12

回答已采纳

1回答

面板滚动c#

、、

我有一个执行一系列汇编命令的项目。这些命令位于一个面板中(autoscroll= true)，并突出显示每次要执行的行。问题是，如果命令的数量大于一个数字，突出显示的文本不会显示在屏幕上，用户必须手动向下滚动面板才能看到它。我想要的是自动更改滚动焦点，以便用户可以看到隐藏的文本时，这是突出<

浏览 1提问于2015-01-16得票数 2

1回答

当您轻触公开图标时，仅表格单元格被突出显示

、

我使用界面构建器在视图上放置了一个表格视图单元格，并添加了附件类型、选择颜色和启用用户交互。我的问题是，只有当用户点击箭头图标时，单元格才会突出显示。但当用户点击其中的文本标签时，它也应该突出显示，他可以在单元格上的任何位置点击。我如何才能做到这一点？

浏览 0提问于2011-10-11得票数 0

回答已采纳

2回答

使用UICollectionView的UITableView

、、、

我有一个UITableView，其中的每一行tableview都有uicollectionview数据。我面临的问题是，UITableView大约有800-1000行，然后每行都有大约200-400个uicollectionview单元格。我理解这个原因，因为有大量的数据。但我想知道如何动态加载和卸载数据的最好方法，这样它就不会出现内存错误，也不会变慢。谢谢

浏览 0提问于2015-07-02得票数 0

1回答

如何移动到web浏览器组件中的某个位置？

、、、

现在我想将滚动条向下移动到一个特定的位置。更具体地说，我希望在页面中搜索特定的文本，并滚动到该位置。这种行为是在浏览器的内置" Find“函数中实现的，但是我不知道如何在我的代码中调用Find函数，而不显示Find窗口。虽然我不希望出现“查找”窗口，但如果文本匹配

浏览 6提问于2010-04-26得票数 3

回答已采纳

1回答

呈现报表时，文本框内的矩形内的Tablix不可见

、、、

我已经构建了一个报告，报告末尾的文本框中有一个警告列表。在这个列表中，我需要显示一个静态文本表。我找到的显示表格的唯一方法是在文本框中放置一个矩形，并将表格放置在矩形中。但是，当我预览报告时，表不会显示。此外，在设计模式下，如果在文本框中单击矩形之外的内容，则矩形和表格都会消失，只有在使用滚动

浏览 7提问于2017-12-18得票数 0

1回答

找到一个文本并使用javascript滚动到其中

、、

我有一个包含数百行的div。我想创建一个函数，允许我找到一个文本并滚动到其中：因此，我在输入文本中输入想要的文本，然后单击"Go“按钮，该按钮将触发"findAndScroll”功能，然后我将滚动到该文本。

浏览 2提问于2010-08-25得票数 4

回答已采纳

1回答

更改UITableViewCell帧但不起作用

、、、、

cell.frame.origin.x, cell.frame.origin.y - 34, cell.frame.size.width, cell.frame.size.height)]; 我想改变表格视图单元格的框架，代码可以在一些ViewController中工作，但有些却不能工作。

浏览 2提问于2012-03-25得票数 3

回答已采纳

2回答

SWT表格在绘制文本时使用哪个文本边距？

、、、

我有一个相对简单的问题--但我找不到任何地方来回答它。因此，当键入"a“时，所有的”a“都应该突出显示。为此，我添加了一个SWT.EraseItem侦听器来干扰背景绘制。如果当前单元格<e

浏览 5提问于2012-11-13得票数 0

回答已采纳

1回答

宏(VBA)使Microsoft word崩溃(查找并替换)

、

我使用VBA代码批量查找和替换突出显示的文本。宏会查找并替换文档中的单词。在小文档(1-2页)上，它可以很好地处理少量突出显示的文本。然而，当我在一个超过100页的大文档上使用这个宏时，Microsoft word崩溃了，并且变得没有反应，所以我不得不退出。代码是为了使编辑信息变得容易。我正在用XXXXX和<

浏览 8提问于2021-02-23得票数 0

1回答

UISplitViewController的主视图在旋转后丢失状态

、、、

在iPad上，我注意到像邮件和WebMD这样的应用程序在点击时会在“主”(左)视图的最后一层突出显示行。他们还会记住旋转后的这种状态；如果您选择横向电子邮件，然后旋转到纵向，然后单击收件箱按钮以弹出主视图弹出窗口，则正确的项目仍会突出显示，并且列表将滚动到正确的位置。将其旋转回横向，它仍然是正确的。我正在开发一个类似于邮件的iPad应用程序。如果

浏览 0提问于2010-08-27得票数 0

回答已采纳

2回答

在eclipse中高亮显示行，就像使用文本标记一样

、

在Eclipse Helios中，我希望使用自定义背景色突出显示选定的行，就像在纸上使用普通文本的文本标记一样。我该怎么做呢？有没有(稳定的) Eclipse插件？

浏览 2提问于2012-03-29得票数 13

回答已采纳

1回答

Excel -查找缺少的内容？

、

我有一个名为"Country.xls“的文件。Excel文件包含两个工作表/记录"Country“和"Country_Old”Country和Country_Code工作表/记录都有以下项目“编码”和“名称” 我想在Country.Code中找到所有匹配的Country_Old.Code，并用颜色标记所有匹配的记录。

浏览 0提问于2011-01-13得票数 0

回答已采纳

1回答

比较Excel中的两列并突出显示相似的列

、

我正在尝试为Excel创建一个宏或查找并加载项，这样就可以做到这一点。我正在使用两个电子表格，每个表格都包含一个DvD名称列表。有些名字可能会有一些不同，比如“李连杰的无畏/释放”和“李连杰的无畏导演的剪辑”是第一个名单上的项目，而“李连杰的无畏”是另一个名单上的项目。我希望宏有一种方法来编写一个不区分大小写的宏，并通过列表2找到列表1

浏览 1提问于2014-01-18得票数 0

1回答

如何使用Google电子表格从另一个表格中的单元格中计数文本？

、

在研究了如何计算单元格中文本的解决方案之后，我遇到了一个问题，我不知道是什么导致了不正确的结果，或者我没有完全正确地使用它。在我的研究中，我读过并测试过： =COUNTIF(foo!当我单击Learn more about COUNTIF上的帮助部分时，我看到了它显

浏览 0提问于2018-04-24得票数 1

回答已采纳

1回答

我正在尝试更改完整日历中日期的安排。现在，在moth，week视图中，日期从左到右排列。我需要从上到下安排日期，而不是从左到右。他们使用表格来安排days .In my opinion表格可能不适合这个要求。所以我用div改变了表。日子是从上到下排列的，但事件并没有完美地显示出来。有人能帮我吗？提前谢谢。我使用的是来自的fullcalendar.js，并根据我的需求更新了代码根据从左到右的日期安排

浏览 2提问于2013-03-21得票数 0

1回答

用于查找重复行的宏

、

我正在寻找一个宏，以查找电子表格中的重复行。y = y + 1 'Next cellNext cell我用嵌套的foor宏应该在列A中查找重复的值。如果找到，宏将遍历该行以检查整行是否匹配。然后，此行中的每个匹配单元格都将突出<e

浏览 0提问于2018-05-12得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

查找表格中文本并平滑地滚动到表格上的位置，并突出显示此行

HTML

CSS (styles.css)

JavaScript (script.js)

解释

应用场景

可能遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐