Как сохранить верхний ряд таблицы HTML после ее фильтрации?

Question

JS:

<script>
          $(document).ready(function(){
            $("#search").on("keyup", function() {
              var value = $(this).val().toLowerCase();
              $("#datatable tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
              });
            });
          });
          </script>

В заголовке используется <thead>. Я хотел бы сохранить это, если это возможно.

Когда я что-то ищу, строка заголовка исчезает - как мне это сохранить?

HTML:

<thead>
              <td style="font-family: robotobold; color: white"><b></b></td>
              <td style="font-family: robotoblack;text-align:right; font-size:10px; color: #aeafaf;">HEADER1</td>
              <td style="font-family: robotoregular;text-align:left; color: #46e08b;"><b></b></td>
              <td style="font-family: robotoblack;text-align:right; font-size:10px; color: #aeafaf;">HEADER2</td>
              <td style="font-family: robotoregular;text-align:left; color: #F65164"><b></b></td>
            </thead>
              <tr>
                <td style="font-family: robotobold;color: white"><i class="fa fa-globe"></i> <b>col1</b></td>
                <td id="con2"style="font-family: robotobold;text-align:right; color: white;">col2</td>
                <td id="new2"style="font-family: robotoregular;text-align:left; color: #46e08b;"><b>col3</b></td>
                <td id="dec2" style="font-family: robotobold;text-align:right; color: white;">col4</td>
                <td id="decnew2"style="font-family: robotoregular;text-align:left; color: #f65164"><b>col5</b></td>
              </tr>

Answer 1

Вы можете получить доступ к tr s только внутри tbody, как -

$("#datatable tbody tr").filter(function() { ...

. Обязательно оберните содержимое таблицы в теге tbody в HTML соответствующим структура.

<table>
  <thead>...</thead>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Запустите приведенный ниже фрагмент кода, чтобы проверить, что относится к вашему примеру.

 $(document).ready(function(){
            $("#search").on("keyup", function() {
              var value = $(this).val().toLowerCase();
              $("#datatable tbody tr").filter(function() {
 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
              });
            });
          });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="search" />
<table id="datatable">  
<thead>
              <td style="font-family: robotobold; color: black"><b></b></td>
              <td style="font-family: robotoblack;text-align:right; font-size:10px; color: #aeafaf;">HEADER1</td>
              <td style="font-family: robotoregular;text-align:left; color: #46e08b;"><b></b></td>
              <td style="font-family: robotoblack;text-align:right; font-size:10px; color: #aeafaf;">HEADER2</td>
              <td style="font-family: robotoregular;text-align:left; color: #F65164"><b></b></td>
            </thead>
            <tbody>
              <tr>
                <td style="font-family: robotobold;color: black"><i class="fa fa-globe"></i> <b>col1</b></td>
                <td id="con2"style="font-family: robotobold;text-align:right; color: white;">col2</td>
                <td id="new2"style="font-family: robotoregular;text-align:left; color: #46e08b;"><b>col3</b></td>
                <td id="dec2" style="font-family: robotobold;text-align:right; color: white;">col4</td>
                <td id="decnew2"style="font-family: robotoregular;text-align:left; color: #f65164"><b>col5</b></td>
              </tr>
              </tbody>
              </table>