突出显示同一页面上不同 html 表格中所有出现的文本答案

【问题标题】：Highlight all occurrences of text in different html tables on same page突出显示同一页面上不同 html 表格中所有出现的文本
【发布时间】：2021-06-14 19:55:42
【问题描述】：

我找到了几种解决方案，但它们都使用 let text = document.getElementById("text").innerHTML; 从带有 ID 的输入字段中收集“搜索”文本。我在网格中设置了十二个单独的 HTML 表格（每个月一个）。每个 HTML 表都是根据从 MySql 表中收集的数据构建的。我只想单击一个表格行并突出显示任何其他表格中的任何其他匹配行。每个表都有 class="in_year"。当我点击它时，我可以从行中获取文本：

$(".in_year tr").click(function(){
   var searchtext =  $(this).children("td:nth-child(n)").text();
   alert(searchtext);
});

警报向我显示所选行中的文本。我试图用我的 searchtext 变量简单地替换其他解决方案中的输入“搜索字段”，但没有任何反应。在我找到的解决方案中，这个不依赖于 ID 标签：

var searchword = $("#searchtxt").val();
var custfilter = new RegExp(searchword, "ig");
var repstr = "<span class='highlight'>" + searchword + "</span>";
if (searchword != "") {
    $('body').each(function() {
        $(this).html($(this).html().replace(custfilter, repstr));
    })
}

我将第一行替换为：

   var searchword =  $(this).children("td:nth-child(n)").text();

仍然没有任何反应......

【问题讨论】：

:nth-child(n) ?
我将 nth-child(n) 更改为 nth-child(1) 以收集行中的第一个 TD 出现而不是行的全部内容。没有影响。

标签： javascript jquery

【解决方案1】：

我使用 jquery 'contains()' 找到了答案：

$(".in_year tr").click(function(){
    $("td").removeClass("highlight");
    var searchtext =  $(this).children("td:nth-child(2)").text();
    $("td:contains('" + searchtext + "')").addClass("highlight");
});

.in_year 类是一个包含所有表格的 div。我发现 td 中的文本被单击并将其存储到“searchtext”。然后我只需添加Class .highlight 包含'searchtext' 变量的所有td。

【讨论】：