逐字突出显示表格中的文字，而不是整个跨度 [英] highlight text in table word by word not whole span

问题描述

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

I want to create the filter for html table like of website (ctrl + f), but current code is highlighting all the span on searching entering single word without any plugin. Just like the image below

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>

推荐答案

尝试如下操作:

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

这可能会对您有所帮助.

This might help you.

请通过下面的插件网址"进行参考.

Please go through below Plugin Url for reference.

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

这篇关于逐字突出显示表格中的文字，而不是整个跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！