Question

我想为网站（html + f）之类的html表创建过滤器，但是当前代码突出显示了搜索没有任何插件的单个单词时的所有跨度。就像下面的图片一样

$("#search").keyup(function() {
  console.log($(this).val());
  if ($(this).val() == "") {
    $("#search_here").find("tr").not("tr:first").find("span").removeClass('highlighted');
    $("#search_here").find("tr").not("tr:first").find("span").find(".inputType").removeClass('highlighted');
    return false;
  }
  
  var data = this.value.toUpperCase().split(" ");
  
  $("#search_here").find("tr").not("tr:first").find("span").each(function(index, elem) {
    var $elem = $(elem);
    //console.log($elem);
    for (var d = 0; d < data.length; ++d) {
      // Highlight
      if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
        console.log($elem.text());
        $elem.addClass('highlighted');
      } else {
        $elem.removeClass('highlighted');
      }
      //console.log();
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span>2019-04-15 10:48:26</span>
    </td>
    <td>
      <span>I19040800</span>
    </td>
    <td>
      <span class="pull-left">District Abbottabad Store</span>
    </td>
    <td>
      <span>Routine</span>
    </td>
    <td>
      <span>1</span>
    </td>
    <td>
      <span>kp_str</span>
    </td>
    <td>
      <span>2019-04-15 10:49:22</span>
    </td>
    <td>
      <span>Dispatched</span>
    </td>
  </tr>
</table>

Answer 1

尝试如下操作：

$("body p").highlight($elem);

这可能会对您有所帮助。

请通过下面的“插件网址”进行参考。

URL：https://www.jqueryscript.net/text/Text-Highlighting-Filtering-Plugin-with-jQuery.html

Answer 2

好吧，就像评论中提到的那样，您需要包装匹配的文本，而不是在父元素中添加类。

我迅速整理了一个可以实现此效果的工作示例：https://jsfiddle.net/53bnwxcj/

负责繁重工作的jQuery ...

$ctx = New-AzureStorageContext -StorageAccountName <storage-account-name> -StorageAccountKey <storage-account-key>
(Get-AzureStorageShare -Context $ctx).count

值得注意的是，此代码每个跨度只能处理一个“突出显示”。因此，如果您在一个跨度中有两个匹配的查询，则只会突出显示最后一个。

我写这是为了帮助您入门。

另一种选择是使用像这样的第三方插件：http://bartaz.github.io/sandbox.js/jquery.highlight.html

逐字突出显示表格中的文字，而不是整个跨度

2 个答案: