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

user_17043444 0
Viewed 341

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.

html javascript
1 Answers

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>

user_97659510
Related