javascript - 如何让highlight.js在一个页面的多个数据表中工作？

Question

到目前为止highlight.js可以很好地突出显示您在数据表中查找的文本。但是，如果我在同一页面中使用多个数据表，则highlight.js仅适用于第一个数据表。

我的三个表看起来像这样(总结):

1:

<table class="table table-hover display" id="table_m">
                <thead>
                        <tr>

2:

<table class="table table-hover display" id="table_r">
                <thead>
                        <tr>

3:

<table class="table table-hover display" id="table_a">
                <thead>
                        <tr>

下面是激活一页中三个数据表的 jQuery 代码:

var table = $('table.display').DataTable();
    
   table.on( 'draw', function () {
    
    var body = $( table.table().body() );
    
    
    body.unhighlight();
        
    body.highlight( table.search() );
    
} );

并且，根据此 answer我在该代码下面使用以下内容:

$("table.display").highlight($("#searchBox").val());

我试图找出 #searchBox id 的来源，但没有成功。我在dataTables.js 和highlight.js 中都没有找到它。我什至注意到，在没有该 id 的情况下，突出显示仍然有效(但仅适用于第一个表):

$("table.display").highlight();

如何让突出显示在三个表中起作用？如何指定不同数据表的搜索输入的 ID？有什么想法吗？

Answer 1

在您提供的答案中，#searchBox 仅提供正在搜索的数据的句柄。将 $("#searchBox").val() 替换为对您要突出显示的数据 block 的引用。

换句话说，如果您想在表中突出显示单词 foo，并且您有一个 id 为 #myInput 的文本输入，其中包含值 foo，将 $("#searchBox").val() 替换为 $("#myInput").val()。

或者，您可以像这样对值进行硬编码:

$("table.display").highlight("foo");

如果您有 3 个不同的搜索输入(每个表一个)，请确保为每个输入提供唯一的 ID，并尝试分别对每个表调用 highlight():

$("#table_m").highlight($("#searchBox_m").val());
$("#table_r").highlight($("#searchBox_r").val());
$("#table_a").highlight($("#searchBox_a").val());