如何使用 JavaScript 在 HTML 表格中搜索单元格?

乔安马卡特

我在这个Fiddle 中有下表

如您所见,是一个每行两列的表,将来会更新该表,增加更多的两行列。

我的目标是使用搜索过滤器在表格顶部显示行。您可以在 Fiddle 中看到此功能。如果您键入:“每周”,将出现“每日”和“每周”行。但首先是每日,而不是每周。

但是我想要的是每次找到带有某个单词的单元格时,我都希望它出现在表格的第一个单元格中。在这种情况下,如果我搜索“每周”,我希望在第一行的第一个单元格中进行搜索。

我怎样才能用 JavaScript 做到这一点?在这里,我将让我的 Javascript 代码(也在 Fiddle 中):

function search() {
  var input, checkfilter, filter, table, tr, td, i;
  input = document.getElementById("myInput");

  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
        td1 = tr[i].getElementsByTagName("td")[1];
    if (td || td1) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1 
          || td1.innerHTML.toUpperCase().indexOf(filter) > -1){
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

非常感谢您的帮助。我非常感谢在 Stackoverflow 中所做的工作。

兹农

我不明白你是在问问题还是在提出解决方案?

getElementById('foobar')是一种在 DOM 中操作对象的方法。例如,这是我用来快速设置 PR 模板的东西:

function () {
    var e = document.getElementById('pull_request_body');
    if (e) {
        e.value += 'Insert pull request template here';
    }
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用 JavaScript 计算 HTML 表格中的单元格数量

来自分类Dev

使用jQuery和JavaScript在HTML表格中创建行和单元格

来自分类Dev

使用Javascript函数在html中编辑表格的单元格

来自分类Dev

使用jQuery和JavaScript在HTML表格中创建行和单元格

来自分类Dev

如何从 HTML/CSS 中的表格中删除单元格?

来自分类Dev

使用纯javascript更改表格中单元格的颜色

来自分类Dev

如何使用javascript设置html中特定单元格的背景颜色?

来自分类Dev

如何在 HTML 表格单元格中居中对齐文本,而不考虑单元格中的其他元素

来自分类Dev

如何使用Jquery内联编辑HTML表格单元格

来自分类Dev

如何使用Jquery内联编辑HTML表格单元格

来自分类Dev

如何在HTML表格中强制使用单元格的边框颜色

来自分类Dev

如何使用angularJS在HTML中制作具有4个单元格的表格

来自分类Dev

如何使用HTML增加表格中单个列的单元格长度?

来自分类Dev

我如何检查单元格是否有颜色并使用JavaScript在表格中获取其位置

来自分类Dev

如何使用JavaScript删除表格中的下一个单元格?

来自分类Dev

如何使用 JavaScript 在表格单元格中写入电子邮件地址?

来自分类Dev

如何从HTML和javascript中的HTML TABLE(User Input)打印或获取单元格值

来自分类Dev

如何从HTML和javascript中的HTML TABLE(User Input)打印或获取单元格值

来自分类Dev

通过Javascript在HTML的表格单元格中插入选择框

来自分类Dev

用于填写表格html单元格的Javascript

来自分类Dev

来自 HTML 表格单元格的 Javascript 函数调用

来自分类Dev

使用Javascript仅在表格中的偶数单元格中插入数据

来自分类Dev

使用JQuery / Javascript将文本插入html div表的特定单元格中?

来自分类Dev

CSS HTML如何删除表格中的整个单元格链接?

来自分类Dev

如何自动将HTML表格单元格中的文本换行换行?

来自分类Dev

如何通过每行中的动态添加按钮更改HTML表格单元格的值

来自分类Dev

如何删除html表格单元格中的所有左右填充?

来自分类Dev

如何在HTML的两个表格单元格中插入昨天和今天的日期?

来自分类Dev

Visual Basic HTML Agility Pack如何从表格单元格中获取图像

Related 相关文章

  1. 1

    使用 JavaScript 计算 HTML 表格中的单元格数量

  2. 2

    使用jQuery和JavaScript在HTML表格中创建行和单元格

  3. 3

    使用Javascript函数在html中编辑表格的单元格

  4. 4

    使用jQuery和JavaScript在HTML表格中创建行和单元格

  5. 5

    如何从 HTML/CSS 中的表格中删除单元格?

  6. 6

    使用纯javascript更改表格中单元格的颜色

  7. 7

    如何使用javascript设置html中特定单元格的背景颜色?

  8. 8

    如何在 HTML 表格单元格中居中对齐文本,而不考虑单元格中的其他元素

  9. 9

    如何使用Jquery内联编辑HTML表格单元格

  10. 10

    如何使用Jquery内联编辑HTML表格单元格

  11. 11

    如何在HTML表格中强制使用单元格的边框颜色

  12. 12

    如何使用angularJS在HTML中制作具有4个单元格的表格

  13. 13

    如何使用HTML增加表格中单个列的单元格长度?

  14. 14

    我如何检查单元格是否有颜色并使用JavaScript在表格中获取其位置

  15. 15

    如何使用JavaScript删除表格中的下一个单元格?

  16. 16

    如何使用 JavaScript 在表格单元格中写入电子邮件地址?

  17. 17

    如何从HTML和javascript中的HTML TABLE(User Input)打印或获取单元格值

  18. 18

    如何从HTML和javascript中的HTML TABLE(User Input)打印或获取单元格值

  19. 19

    通过Javascript在HTML的表格单元格中插入选择框

  20. 20

    用于填写表格html单元格的Javascript

  21. 21

    来自 HTML 表格单元格的 Javascript 函数调用

  22. 22

    使用Javascript仅在表格中的偶数单元格中插入数据

  23. 23

    使用JQuery / Javascript将文本插入html div表的特定单元格中?

  24. 24

    CSS HTML如何删除表格中的整个单元格链接?

  25. 25

    如何自动将HTML表格单元格中的文本换行换行?

  26. 26

    如何通过每行中的动态添加按钮更改HTML表格单元格的值

  27. 27

    如何删除html表格单元格中的所有左右填充?

  28. 28

    如何在HTML的两个表格单元格中插入昨天和今天的日期?

  29. 29

    Visual Basic HTML Agility Pack如何从表格单元格中获取图像

热门标签

归档