javascript - 过滤后如何保留 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>

标签： javascripthtml

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>