Javascript表格过滤器不显示表格标题答案

【问题标题】：Javascript table filter doesn't show table headersJavascript表格过滤器不显示表格标题
【发布时间】：2020-07-21 19:19:03
【问题描述】：

我使用脚本根据选择值过滤表。该脚本有效，唯一的问题是它还过滤了表格的标题，我希望始终显示。这是javascript和表格：

$(document).ready(function($) {

  $('#mac').change(function() {

    var selection = $(this).val();
    var dataset = $('table').find('tr');

    dataset.show();

    dataset.filter(function(index, item) {
      return $(item).find('td:last-child').text().split(';').indexOf(selection) === -1;
    }).hide();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="mac">
<table id="table_id" class="display">
  <thead>
    <tr>
      <th>Tipo</th>
      <th>Descrizione</th>
      <th>Scadenza</th>
      <th>Società</th>
      <th>Macrotema</th>
    </tr>
  </thead>
  <tbody>
    <tr style=" background-color:">

      <td>Prescrizione</td>
      <td>Corsi di aggiornamento </td>
      <td>
        <nobr>2025/01/01</nobr>
      </td>
      <td>XXXX</td>
      <td>SEDE; </td>
    </tr>
    <tr style=" background-color:">

      <td>Prescrizione</td>
      <td>Rinnovo iscrizione</td>
      <td>
        <nobr>2024/12/31</nobr>
      </td>
      <td>XXXX</td>
      <td>SEDE; </td>
    </tr>
    <tr style=" background-color:">
  </tbody>

</table>

我的问题是：如何编辑脚本以显示标题？

感谢您的宝贵时间 :D 如果我需要更好地解释情况，请告诉我。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以添加更具体的选择器：

var dataset = $('table tbody tr');

【讨论】：

只有在我们清除mac输入的情况下才会这样。它不会返回任何结果。

【解决方案2】：

请找到以下带有输出的解决方案。

$(document).ready(function($) {

  $('#mac').change(function() {

    var selection = $(this).val();
    var dataset = $('table').find('tr');

    dataset.show();

    dataset.filter(function(index, item) {
      return index !== 0 && $(item).find('td:last-child').text().split(';').map(x => x.trim()).indexOf(selection) === -1;
    }).hide();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="mac">
<table id="table_id" class="display">
  <thead>
    <tr>
      <th>Tipo</th>
      <th>Descrizione</th>
      <th>Scadenza</th>
      <th>Società</th>
      <th>Macrotema</th>
    </tr>
  </thead>
  <tbody>
    <tr style=" background-color:">

      <td>Prescrizione</td>
      <td>Corsi di aggiornamento </td>
      <td>
        <nobr>2025/01/01</nobr>
      </td>
      <td>XXXX</td>
      <td>SEDE; </td>
    </tr>
    <tr style=" background-color:">

      <td>Prescrizione</td>
      <td>Rinnovo iscrizione</td>
      <td>
        <nobr>2024/12/31</nobr>
      </td>
      <td>XXXX</td>
      <td>SEDA; </td>
    </tr>
    <tr style=" background-color:">
  </tbody>

</table>

【讨论】：