由于搜索操作，更改表格文本的颜色

Change color of table text due to search operatives

本文关键字：表格 文本 颜色 操作 于搜索 搜索      更新时间：2023-09-26

我有通过动态方式更新的表。我想在搜索操作中实时将特定文本更改为彩色文本。

在这个例子中，正如您所看到的，可以通过智能的方式使它们对所有文档都是丰富多彩的。

第二个示例完美地展示了如何为table创建实时搜索引擎。

现在，问题来了：有可能让实时搜索的结果充满色彩吗？不是整列或整行。我只需要更改input的匹配value的颜色value。长话短说，我该如何修改第二个例子？

这是代码：http://jsfiddle.net/e2106b62/2/

我在HTML:中使用过的经典表格

 <table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 
<input id="search">

JS我正在尝试用于搜索（你可以在第二个示例链接中找到）：

var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function() {
        var text = $(this).text().replace(/'s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

我需要在搜索模块中实现的另一个JS：

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

在您的示例的基础上，这就完成了任务。

工作小提琴

var $cells = $('#table td');
$('#search').keyup(function() {
    var input = $(this).val();
    var val = '^(?=.*''b' + $.trim(input).split(/'s+/).join('''b)(?=.*''b') + ').*$',
        reg = RegExp(val, 'i'),
        text;
    
    $cells.show().filter(function() {
        text = $(this).text().replace(/'s+/g, ' ');
        if(!reg.test(text) || input == ''){
        	$(this).css('color','black');
        } else {
            $(this).css('color','green');
        }
    });
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search">
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

只是想添加一个不同的高亮选项。这样，它将只突出显示匹配的文本，不区分大小写。您可以更改css类，使其以您想要的方式高亮显示，就像更改background-color一样。

工作JSFiddle

$('#search').keyup(function() {
    $(".highlight").removeClass("highlight");
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $('table tr').hide().filter(function() {
        var text = $(this).text().replace(/'s+/g, ' ').toLowerCase();
        return ~text.indexOf(val);
    }).show().find("td").each(function(){
        var start = $(this).text().toLowerCase().indexOf(val);
        if(start !== -1){
            var end = val.length;
            var start_text = start != 0 ? $(this).text().substring(0,start) : "";
            var end_text = $(this).text().substring(start + end);
            var match = $(this).text().substring(start, start + end);
            $(this).html(start_text+'<span class="highlight">'+match+'</span>'+end_text);
        }
    });
});
相关文章：