Question

当用户在页面上输入搜索词时（基本上是一个大表），我正在尝试为用户提交的搜索结果添加背景颜色。这是一个基于文本的搜索。我正在使用jquery来显示/隐藏TR中没有搜索词作为文本的表行，但我最好采取额外的步骤来获取搜索词（输入的值），并匹配任何剩余（显示）行中的那些文本术语，并添加说明单词的黄色背景。我知道我的语法目前是错误的，只是不确定什么是正确的:)希望这很清楚...任何帮助都非常感谢！

形式的HTML：

的jquery： $（“＃searchsubmit”）。click（function（）{ var searchexp = document.getElementById（'searchbox'）。value; $（“table tr”）。hide（）; $（“table tr.header”）。show（）; $（'tr：contains（'+ searchexp +'）'）。show（）; $（searchexp）的CSS（ '背景色'， '黄色'）; }）;

Answer 1

您想要隐藏内容中具有0个匹配项的<tr>，并且还希望突出显示具有匹配项的<tr>中的匹配文本。

为此，您需要使用正则表达式（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp）

您进行输入，然后使用RegExp匹配要查找的字符串的所有实例。您遍历每个表<tr>，并在其中遍历所有<td>，获取它们的文本，然后将匹配的字符串替换为黄色的<span>。您还将变量foundSomeMatch设置为true，因此在遍历<tr>之后，如果有匹配项，则可以.show() <tr>当前使用内。

您可以在下面的代码段中进行尝试，尝试搜索test，test1或new entry来查看过滤器的工作原理。

$(document).ready(function(){
   $("#searchsubmit").click(function () {
	var searchexp = $("#searchbox").val();
	$("table").find("tr").hide();
        var matchSearched = new RegExp(searchexp,"ig");

        $("table").find("tr").each(function(){
           var foundSomeMatch = false;
           $(this).find("td").each(function(){
               let textInside = $(this).text();
               textInside = textInside.replace(matchSearched, function myFunction(x){
                   foundSomeMatch = true;
                   return '<span style="background-color: yellow;">'+x+'</span>';
               });
               $(this).html(textInside);
              if(foundSomeMatch){
                  $(this).closest("tr").show();
              }
           });
        });
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="searchform" method="get" action="#">
  <input type="text" id="searchbox" />
  <input type="submit" value="Search" id="searchsubmit" />
</form>


<table>
   <tbody>
      <tr><td>test1</td></tr>
      <tr><td>test2</td></tr>
      <tr><td>new entry</td><tr>
   </tbody>
</table>

添加背景颜色以搜索术语结果

1 个答案: