如何在html表格中重置过滤器答案

【问题标题】：How to reset filter in html table如何在html表格中重置过滤器
【发布时间】：2021-07-22 08:52:45
【问题描述】：

简而言之，我正在寻找一种方法来重置我在 jquery 上制作的过滤器。这是我用于搜索的 html，输入文本 + 按钮提交：

<label for="formInput">Rrecherche: </label>

<input class="form-control search-box__input"
name="formInput" type="text"
id="formInput" />

<input type="submit" id="btn-search" class="search-box__submit cc-btn" value="rechercher"> 

<button type="button" class="search-box__reset" id="search-box__reset">Réinitialiser</button>

HTML 表格：

<table class="cc-table table table-bordered" id="cc-table">
    <thead>
        <tr>
            <th>
                <p> Candidat(e) </p>
            </th>
            <th>
                <p> parrainages validés </p>
            </th>
            <th>
                <p> 01/03/2022 </p>
            </th>
            <th>
                <p> 03/03/2022 </p>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr style="">
            <td>
                <p> ZARTHAUD Nathalie </p>
            </td>
            <td>
                <p> Mark </p>
            </td>
            <td>
                <p> Otto </p>
            </td>
            <td>
                <p> @mdo </p>
            </td> 
        </tr>
        <tr style="">
            <td>
                <p> ASSELINEAU François </p>
            </td>
            <td>
                <p> Jacob </p>
            </td>
            <td>
                <p> Thornton </p>
            </td>
            <td>
                <p> @fat </p>
            </td> 
        </tr>
        <tr style="">
            <td>
                <p> HAMON Benoît</p>
            </td>
            <td>
                <p>Larry the Bird </p>
            </td>
            <td>
                <p> @twitter </p>
            </td>
            <td>
                <p>Larry the Bird </p>
            </td> 
        </tr>
    </tbody>
</table>

这是我过滤 html 表的 jquery：
……………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………… ......................................

$("#btn-search").on('click', function (e) {
    var value = $("#formInput").val().toLowerCase();
    $("#cc-table tbody tr").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

谢谢

【问题讨论】：

标签： javascript html filter

【解决方案1】：

很简单，一旦点击“reset”按钮，输入的值就会变成空，开始搜索会重置过滤器。

$("#btn-search").on('click', function(e) {
  let value = $("#formInput").val().toLowerCase();
  $("#cc-table tbody tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});
$("#search-box__reset").on('click', function(e) {
  let value = $("#formInput").val('').text('');
  $("#btn-search").click();
});

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

<input class="form-control search-box__input" name="formInput" type="text" id="formInput" />

<input type="submit" id="btn-search" class="search-box__submit cc-btn" value="rechercher">

<button type="button" class="search-box__reset" id="search-box__reset">Réinitialiser</button>



<table class="cc-table table table-bordered" id="cc-table">
  <thead>
    <tr>
      <th>
        <p> Candidat(e) </p>
      </th>
      <th>
        <p> parrainages validés </p>
      </th>
      <th>
        <p> 01/03/2022 </p>
      </th>
      <th>
        <p> 03/03/2022 </p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr style="">
      <td>
        <p> ZARTHAUD Nathalie </p>
      </td>
      <td>
        <p> Mark </p>
      </td>
      <td>
        <p> Otto </p>
      </td>
      <td>
        <p> @mdo </p>
      </td>
    </tr>
    <tr style="">
      <td>
        <p> ASSELINEAU François </p>
      </td>
      <td>
        <p> Jacob </p>
      </td>
      <td>
        <p> Thornton </p>
      </td>
      <td>
        <p> @fat </p>
      </td>
    </tr>
    <tr style="">
      <td>
        <p> HAMON Benoît</p>
      </td>
      <td>
        <p>Larry the Bird </p>
      </td>
      <td>
        <p> @twitter </p>
      </td>
      <td>
        <p>Larry the Bird </p>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：