How to reset filter in html table

  filter, html, javascript

To be brief, im looking for a way to reset my filter made on jquery.
This is my html for searching, input text + button submit:

                  <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 :

<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>

This is my jquery to filter an html table :
This is my jquery to filter an html table :
This is my jquery to filter an html table :
This is my jquery to filter an html table :

$("#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)
    });
});

Thank you

Source: Ask Javascript Questions

LEAVE A COMMENT