Как выделить строку результатов поиска в таблице данных, используя уникальное значение столбца в 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>