Показывать строку данных таблицы при нажатии на кнопку в javascript

#javascript #html

Вопрос:

В текстовом поле, когда пользователь вводит имя, отображается конкретная строка таблицы, а также я хочу, чтобы она отображалась, когда пользователь нажимает на кнопку, скрывающую другие несоответствующие данные.

     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>

когда пользователь ищет «лису» в поле поиска, появляется строка таблицы соответствия, кроме того, я хочу отображать только определенную строку таблицы соответствия при нажатии на кнопку.

когда я нажимаю на кнопку, она просто показывает соответствующую строку таблицы на секунду и показывает все строки.

1. посмотрите, это может вам помочь.

2. Я пытался реализовать jQuery с помощью этого кода, хотя я новичок в JS и jQuery, Если бы вы могли помочь мне в этом, было бы здорово @AhmedTagAmer

3. не могли бы вы, пожалуйста, помочь мне @AhmedTagAmer

4. Просто реализуйте код здесь , добавьте id="myTable" его в тело таблицы и внесите некоторые небольшие изменения, чтобы выполнить действие при нажатии на кнопку.

Ответ №1:

Я использовал этот код

Редактировать:

разве мы не можем оба нажать на кнопку в одном и том же коде?

Да, проверьте это редактирование.

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

1. Большое спасибо. Это сработало, когда я нажал на кнопку сброса, она не выполняла никаких действий. когда я снова нажимаю на ту же кнопку «Применить», она возвращается.

2. разве мы не можем оба нажать на кнопку в одном и том же коде?

3. Проверьте правку.