Show the table data row when click on the button in javascript

Question

In the text box when the user enters the name it shows the particular table row and also I want it to show when the user clicks on the button hiding other non matching data.

    document.getElementById("Name").addEventListener("click", myFunction());

    function myFunction() {

        var input, filter, table, tr, td, i;
        input = document.getElementById("Vendor_Name");
        filter = input.value.toUpperCase();
        table = document.getElementById("table_id");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                let tdata = td[j];
                if (tdata) {
                    if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                        break;
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    }

<div class="container">
    <div class="sidebar">
        <form action=" " method="POST" autocomplete="off" onclick="myFunction()">
            {% csrf_token %}
            <div>Name</div>
            <div class="row" id="id_row">
                <input type="text" 
                       name="Name" 
                       id="Name" 
                       maxlength="255"
                       class="form-control mb-3" 
                       placeholder="Name" 
                       id="id_Name"
                       required="" onkeyup="myFunction()">
            </div>
            <div>
                <input type="submit" 
                       value="Apply" 
                       id="btn_submit" 
                       style=" width:72px;
                    height:34px;" 
                       class="btn btn-success btn" 
                       onclick="myFunction()">
                <input type="reset" 
                       value="Reset" 
                       id="btn_submit" 
                       style=" width:72px;
                   height:34px;" 
                       class="btn btn-success btn">
            </div>
        </form>
    </div>

    <table>
        <thead>
        <th> Country</th>
        <th> Region</th>
        <th> name</th>
        </thead>
        <tbody>
        <tr>
            <td>US</td>
            <td>Northamerica</td>
            <td>Dell</td>
        </tr>
        </tbody>
    </table>
</div>

when a user searches "fox" in the search box the matching table row appears, additionally I want to display only a particular matching table row when clicking on the button.

when I click on the button it just shows a matching table row for a second and shows all rows.

Answer 1

I used This code

EDIT:

can't we have both click onkeyup in the samecode?

Yes, check this edit.

$(document).ready(function(){
  $("#Name").on("keyup", function() {
    search('#Name');
  });
  
  $("#btn_submit").on("click", function() {
    search('#Name');
  });
  
  $("#btn_reset").on("click", function() {
    $("#Name").val('');
    search('#Name');
  });
});

function search(input){
  var value = $(input).val().toLowerCase();
    $("#myTable 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>
<div class="container">
    <div class="sidebar">
        <!--<form action=" " method="POST" autocomplete="off" onclick="myFunction()">-->
            {% csrf_token %}
            <div>Name</div>
            <div class="row" id="id_row">
                <input type="text" 
                       name="Name" 
                       id="Name" 
                       maxlength="255"
                       class="form-control mb-3" 
                       placeholder="Name" 
                       id="id_Name"
                       required="" autocomplete="off">
            </div>
            <div>
                <input type="button" 
                       value="Apply" 
                       id="btn_submit" 
                       style=" width:72px;
                    height:34px;" 
                       class="btn btn-success btn">
                <input type="reset" 
                       value="Reset" 
                       id="btn_reset" 
                       style=" width:72px;
                   height:34px;" 
                       class="btn btn-success btn">
            </div>
        <!--</form>-->
    </div>

    <table>
        <thead>
        <th> Country</th>
        <th> Region</th>
        <th> name</th>
        </thead>
        <tbody id="myTable">
        <tr>
            <td>US</td>
            <td>Northamerica</td>
            <td>Dell</td>
        </tr>
        <tr>
            <td>AE</td>
            <td>Dubai</td>
            <td>HP</td>
        </tr>
        <tr>
            <td>EG</td>
            <td>Cairo</td>
            <td>Lenovo</td>
        </tr>
        <tr>
            <td>UK</td>
            <td>London</td>
            <td>IBM</td>
        </tr>
        </tbody>
    </table>
</div>