Question

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

我想做什么：
在表中查找子字符串，突出显示它并隐藏所有其他没有子字符串的字符串。它类似于Google Chrome的 Ctrl F 函数，只显示包含输入搜索子字符串的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();
        }
    });
 });
}

Answer 1

使用过滤器删除不匹配的行并添加类

$('#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; }

Answer 2

我想我理解你的问题。看看这里：https://jsfiddle.net/davidbuzatto/7wzbrf7o/1/

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);
};

CSS：

.highlight { 
    background-color: yellow;
}

Answer 3

如果你需要的只是亮点，那么使用：

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

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

突出显示表格中的子字符串

3 个答案: