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>

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

1 个答案: