Javascript 通过高亮显示查找所有TD中的值

我有这个脚本用于在表中搜索，突出显示“input”中的值。但仅适用于所有TR中的第一个TD

函数删除突出显示

function removeHighlighting(highlightedElements){
   highlightedElements.each(function(){
       var element = $(this);
       element.replaceWith(element.html());
  })
}

function addHighlighting(element, textToHighlight){
   var text = element.text();
   var highlightedText = '<em>' + textToHighlight + '</em>';
   var newText = text.replace(textToHighlight, highlightedText);

   element.html(newText);
}

函数添加高亮显示

function removeHighlighting(highlightedElements){
   highlightedElements.each(function(){
       var element = $(this);
       element.replaceWith(element.html());
  })
}

function addHighlighting(element, textToHighlight){
   var text = element.text();
   var highlightedText = '<em>' + textToHighlight + '</em>';
   var newText = text.replace(textToHighlight, highlightedText);

   element.html(newText);
}

---

我不知道如何在所有TD中搜索，以及如何编写，例如，如果“matchedIndex==-1”（如果未从输入中找到某些值）的一些警报。

尝试在TR的所有TDs中循环

$("table tr").each(function(index) {
    if (index !== 0) {
        row = $(this);

        $("td", this).each(function(idx) {
          var id = $(this).text(); //or $(this).innerText
          var matchedIndex = id.indexOf(value);

          if (matchedIndex != 0) {
            $row.hide();
          }
          else {
            addHighlighting($tdElement, value);
            $row.show();
          }
        }
    }
  });

近路

$("table tr > td em").each(function(){  
    $( this ).replaceWith(   $( this ).text() );    
});

---

添加一个带有highlight类的

span

标记是按照注释中建议的方法

请在下面和下面找到一个工作演示

有一个非常有用的函数可以删除跨度的所有环绕。您可以使用

$（'span.highlight'）.contents（）.unwrap（）执行此操作

要查找文本，可以使用
string.search（searchText）
或
string.match（searchText）
。如果未找到任何内容，
search
方法将返回-1，如果找到，则返回文本的位置。而
match
将返回搜索文本中出现的内容

为了测试它是否找到第一次出现，我在表中添加了
TestY
。标志
matched
负责此行为。如果删除它，它将突出显示这两个测试元素


（函数（）{
var removeHighlight=函数（）{
$（'span.highlight'）.contents（）.unwrap（）；
};
var wrapContent=函数（索引，$el，文本）{
变量$highlight=$（''）
.text（text.substring（0，索引））；
//log（text.substring（0，索引））；
var normalText=document.createTextNode（text.substring（index，text.length））；
//log（索引$highlight.text（），normalText）；
$el.html（$highlight）.append（normalText）；
};
var highlightTextInTable=函数（$tableElements，searchText）{
//如果发现文本（在键入过程中），则高亮显示
var匹配=假；
//删除跨距
移除突出显示（）；
$.each（$tableElements，function（index，item）{
变量$el=$（项目）；
如果（$el.text（）.search（searchText）！=-1&&！匹配）{
//log（“matched”、$el、$el.html（））；
wrapContent（searchText.length，$el，$el.html（））；
//log（searchText$el.text（））；
如果（searchText==$el.text（））{
//找到条目
//控制台日志（“匹配”）；
匹配=真；
}
}
});
};
$（函数（）{
//将表加载到对象中
var$tableRows=$（'table tr'）；
var$tableElements=$tableRows.children（）；
//log（$tableRows，$tableElements）；
$（'#search'）。在（'keyup'，函数（e）上{
var searchText=$（this.val（）；
如果（searchText.length==0）{
//捕获空输入的错误触发器（例如，退格删除或案例锁定开关将触发该功能）
removeHighlight（）；//删除最后剩余的高光
返回；
}
highlightTextInTable（$tableElements，searchText）；
});
});
})();
。突出显示{
背景色：#00FFFF；
}

TestX
测试1.2
测试1.3
测试1.4
测试2.1
易怒的
测试2.3
测试2.4
测试3.1
易怒的
测试3.3
测试3.4
html的外观如何？简单地说，尝试更改突出显示机制。怎样？！简单地说，与突出显示的
不同，使用jquery选择器的
getElementsByClassName（）
或
$（“.someClass”）
来移除突出显示或突出显示的文本。