Question

我正在尝试实施搜索表，我在网上找到了答案，我尝试了，它运行正常！

现在我要突出显示在表格单元格中找到的搜索关键字（更改文字颜色：文字颜色类=蓝色文字），我搜索了这个答案，但我找不到任何有用的东西！

我的HTML是

<table class="stdtable">
  <tr>
    <td id="stdname">Name</td>
    <td id="stdreg">Reg. No.</td>
    <td id="stdparent">Parent</td>
    <td id="stdgrp">Group</td>
    <td id="action">Action</td>
  </tr>
</table>

和Jquery是

$("#filter").on("keyup", function() {
    var searchKey = $(this).val().toLowerCase();
    $(".stdtable tr #stdname").each( function() {
        var searchStr = $(this).text().toLowerCase();
        if (searchStr.indexOf(searchKey)!=-1) {
            $(this).parent().show();
        }
        else {
            $(this).parent().hide();
        }
    });
});

如何突出显示搜索到的文字？如果我搜索 N 名称中的文字 N 应更改颜色

如果我清除搜索字段，我还需要清除文本的颜色

Answer 1

我不知道你的设置，但我会让课程“突出显示” 并为此类提供属性：color: blue;或任何其他任何css属性，您需要特殊结果。那么

$("#stdname").addClass("highlighted");

和

$("#stdname").removeClass("highlighted");

删除搜索字段时

编辑：将上述内容留给想要所有文字的人。

你可以

var s = $(this).val();
var txt = $("#stdname").val().replace(s, '<span style="color: blue">' + s +  '</span>');
$("#stdname").val(txt);

请注意，如果每次按键启动时都不从$("#stdname").val()删除span语句，您将会遇到奇怪的行为

使用jquery

1 个答案: