Javascript 高亮显示表中的子字符串

我见过类似的问题，但这次有点不同。

我想做什么：
在表中找到一个子字符串，高亮显示它并隐藏所有其他没有该子字符串的tr。这就像google chrome的CtrlF函数，只显示包含输入搜索子字符串的tr。

这里我有一个函数，可以找到子字符串，但不突出显示它，注释行是一些不成功的尝试

function LogSearch() {
//var x, y, oldHtml;
$('#inputSearch').on('keyup', function (e) {
var value = this.value;
    $('#grid > tbody  > tr').each(function () {
        var bMatch = false;
        $(this).find('td').each(function () {
            //oldHtml = $(this).html();
            if ($(this).html().indexOf(value) > -1) {
                //x = $(this).html().indexOf(value);
                //y = $(this).html().indexOf(value) + value.length;
                //$(this).html($(this).html().substring(0, x) + "<span class='orangeText' style='background-color:orange;'>" + value + "</span>" + $(this).html().substring(y));
                bMatch = true;
                return false;
            }
            //else if ($(this).find(".orangeText")) {
            //    var fullHtml = $(this).remove(".orangeText");
            //    $(this).html(fullHtml);
            //}
        });
        if (bMatch) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
 });
} 

函数LogSearch（）{
//变量x，y，oldHtml；
$（'#inputSearch'）。在（'keyup'，函数（e）上{
var值=此值；
$（'#grid>tbody>tr'）。每个（函数（）{
var bMatch=false；
$（this.find（'td'）。每个（函数（）{
//oldHtml=$（this.html（）；
if（$（this.html（）.indexOf（value）>-1）{
//x=$（this.html（）.indexOf（value）；
//y=$（this.html（）.indexOf（value）+value.length；
//$（this.html（$（this.html（）.substring（0，x）+++value++$（this.html（）.substring（y））；
b匹配=真；
返回false；
}
//else if（$（this.find（“.orangeText”））{
//var fullHtml=$（this.remove（“.orangeText”）；
//$（this.html（fullHtml）；
//}
});
如果（b匹配）{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
});
} 

---

如果您只需要突出显示，请使用：

$(this).css('background-color', 'yellow');

---

$（这）将是您想要突出显示的内容。

如果您只需要突出显示，请使用：

$(this).css('background-color', 'yellow');

---

$（这）将是您要突出显示的内容。

使用筛选器删除不匹配的行并添加类

$('#inputSearch').on('keyup', function (e) {
  var value = this.value.toLowerCase();
  $('#grid > tbody  > tr')
    .removeClass("high")
    .filter( function () {
      return $(this).html().toLowerCase().indexOf(value) != -1;
    })
    .addClass("highlight");
});

还有CSS

tr.highlight td { background-color: green; }

---

使用筛选器删除不匹配的行并添加类

$('#inputSearch').on('keyup', function (e) {
  var value = this.value.toLowerCase();
  $('#grid > tbody  > tr')
    .removeClass("high")
    .filter( function () {
      return $(this).html().toLowerCase().indexOf(value) != -1;
    })
    .addClass("highlight");
});

还有CSS

tr.highlight td { background-color: green; }

---

我想我理解你的问题。请看这里：

JavaScript:

$( "#inputSearch" ).on( "keyup", function(e) {

  reset();

  var v = this.value;

  $( "#grid > tbody  > tr" ).each( function () {  

    var found = false;

    $(this).find( "td" ).each( function () {
      var tdV = $(this).html();
      var ind = tdV.indexOf(v);
      if ( ind != -1 ) {
        tdV = replaceAll( tdV, v, '<span class="highlight">' + v + '</span>' );
        $(this).html(tdV);
        found = true;
      }
    });

    if ( !found ) {
      $(this).hide();
    }

  });

});

function reset() {
    $( "#grid > tbody  > tr" ).each( function () {
    $(this).show();
    $(this).find( "td" ).each( function () {
      var tdV = $(this).html();
      tdV = replaceAll( tdV, '<span class="highlight">', '' );
      tdV = replaceAll( tdV, '</span>', '' );
      $(this).html(tdV);
    });
  });
}

function replaceAll( target, search, replacement ) {
    return target.split(search).join(replacement);
};

---

我想我理解你的问题。请看这里：

JavaScript:

$( "#inputSearch" ).on( "keyup", function(e) {

  reset();

  var v = this.value;

  $( "#grid > tbody  > tr" ).each( function () {  

    var found = false;

    $(this).find( "td" ).each( function () {
      var tdV = $(this).html();
      var ind = tdV.indexOf(v);
      if ( ind != -1 ) {
        tdV = replaceAll( tdV, v, '<span class="highlight">' + v + '</span>' );
        $(this).html(tdV);
        found = true;
      }
    });

    if ( !found ) {
      $(this).hide();
    }

  });

});

function reset() {
    $( "#grid > tbody  > tr" ).each( function () {
    $(this).show();
    $(this).find( "td" ).each( function () {
      var tdV = $(this).html();
      tdV = replaceAll( tdV, '<span class="highlight">', '' );
      tdV = replaceAll( tdV, '</span>', '' );
      $(this).html(tdV);
    });
  });
}

function replaceAll( target, search, replacement ) {
    return target.split(search).join(replacement);
};

---

因为你在循环外进行匹配。因为你在循环外进行匹配。