Question

Here是我搜索和工作良好的小提琴，但我想改变现有代码，以获得突出显示的字母背景而不是总字数。只有字母背景突出显示........

在此代码中进行更改........

＆＃13;

$("#search").keyup(function() {
  value = $(this);
  if (value.val() == "") {
    $.each($("#ftz-table tbody tr td"), function() {
      $(this).css('background-color', 'rgba(0,0,0,0)');
    })
    return;
  }
  $.each($("#ftz-table tbody tr td"), function() {
    if (!($(this).text().toLowerCase().indexOf($(value).val().toLowerCase()) == -1)) {
      $(this).css("background-color", "red");
    } else {
      $(this).css("background-color", "rgba(0,0,0,0)");
    }
  });
});

＆＃13;

Answer 1

改变这个：

$(this).css("background-color", "red");

进入这个：

$(this).css("color", "red");

Answer 2

这应该这样做：

if(!($(this).text().toLowerCase().indexOf(searched_term) == -1)){
    $(this).html(original_text.replace(searched_term, "<mark style='background: yellow'>"+searched_term+"</mark>"));
}   
else{
    $(this).text($(this).text());   
}

基本上我的想法是用html元素替换搜索的术语，以便我们可以使用css轻松突出显示它。

演示：https://jsfiddle.net/h6tsdq0w/6/

在搜索时需要高光字母

2 个答案: