如何使用 Jquery 中的唯一列值突出显示数据表中的搜索结果行

Question

我有一个来自ajax响应的数据表结果。新插入/更新的值将由我的逻辑找到并给出<td>Unique value in First column<td>这是唯一的，但是，我的目标是在具有分页选项的数据表中执行搜索操作。如何使用此唯一值实现搜索操作并突出显示此结果行。？欢迎任何解决方案。此专栏我正在获取值 $("td", row).eq(0).html(item[i].projectIcode);

Answer 1

下面的代码使用 jquery 突出显示第一个单元格的文本内容与搜索框中的文本匹配的任何行。您可以在数据加载并显示到网页上后触发该函数，将您的唯一搜索词传递给highlight()函数。

如果您需要其他任何东西，请告诉我。

// Add change event to search box
$('#search').on('input', function() {
  // Launch higlight function, passing search term
  highlight($(this).val());
});
// Highlight function, that accepts any search string
function highlight(searchText) {
  // Remove any highlight classes already attached to a row
  $("tr.highlight").removeClass("highlight");
  // Cycle through each row
  $("tr").each(function() {
    // Check if the first cell of each row matches search term
    if (searchText == $(this).children("td").first().text()) {
      // Add highlight class to row if matches
      $(this).addClass("highlight");
    }
  });
}

td, th {
  border-bottom: 1px solid black;
  padding: 4px;
}
tr.highlight {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Search ID: <input id="search">
<hr style="margin: 20px 0px;">
<table>
  <tr>
    <th>Index</th>
    <th>More content</th>
    <th>More content</th>
    <th>More content</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>Some other content</td>
    <td>Some other content</td>
    <td>Some other content</td>
  </tr>
  <tr>
    <td>0002</td>
    <td>Some other content</td>
    <td>Some other content</td>
    <td>Some other content</td>
  </tr>
  <tr>
    <td>0003</td>
    <td>Some other content</td>
    <td>Some other content</td>
    <td>Some other content</td>
  </tr>
</table>