Поиск данных по различным столбцам с использованием jquery

Question

Я пытаюсь получить данные, используя текстовое поле поиска. Проблема сейчас в том, что код работает только для одного столбца с индексом [1]. Я хочу получить данные из 3 столбцов, используя одно и то же текстовое поле. Ниже мой код:

$(document).ready(function() {
  $('input[name="search_text"]').on('keyup', function() {

          var input, filter, tr, td, i;

          input  = $(this);
          filter = input.val().toUpperCase();
          tr     = $("table tr");

          for (i = 0; i < tr.length; i++) {
              td = tr[i].getElementsByTagName("td")[1];
              if (td) {
                  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                      tr[i].style.display = "";
                  } else {
                      tr[i].style.display = "none";
                  }
              }
          }
      })
})

Answer 1

Самое простое расширение того, что у вас уже есть, может быть:

for (i = 0; i < tr.length; i++) {
    var line = "";
    td = tr[i].getElementsByTagName("td")[1];
    if (td) line += td.innerHTML.toUpperCase();

    td = tr[i].getElementsByTagName("td")[3];
    if (td) line += td.innerHTML.toUpperCase();

    td = tr[i].getElementsByTagName("td")[7];
    if (td) line += td.innerHTML.toUpperCase();

    if (line.indexOf(filter) > -1) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }

Если вы прекратите смешивать jquery и ваниль javascript, вы получите:

tr = $("table tr");
tr.each(function() { 
    // which ever columns are required
    $(this).toggle($("td:eq(1),td:eq(2),td:eq(6)", tr).text().toUpperCase().indexof(filter) > -1);
}

(или используйте .filter вместо .each для одной строки)

Answer 2

Чтобы это работало, когда он выбирает только подмножество ячеек в строке, вы можете использовать селектор :nth-child(). Оттуда вы можете скрыть / показать родителя tr в зависимости от найденных совпадений.

Также обратите внимание, что логи c можно сделать намного проще с помощью метода jQuery filter().

В приведенном ниже примере вы можете видеть, что в поле поиска допустимы только поля An, Bn и Cn.

$(document).ready(function() {
  let $rows = $('table tr');
  let $cells = $rows.find('td').filter(':nth-child(-n+3)');
  
  $('input[name="search_text"]').on('input', function() {
    $rows.hide();
    let searchValue = $(this).val().trim().toUpperCase();
    $cells.filter((i, el) => el.textContent.trim().toUpperCase().indexOf(searchValue) != -1).closest('tr').show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="search_text" />
<table>
  <tbody>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
      <td>D1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
      <td>D2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
      <td>D3</td>
    </tr>
  </tbody>
</table>