Блог

Главная - Вопросы по программированию - Мой табличный фильтр с помощью javascript не работает

Мой табличный фильтр с помощью javascript не работает

#javascript #java #spring #h2

#javascript #java #весна #h2

Вопрос:

Я делаю проект на intellij с помощью springboot, и у меня есть динамическая таблица. Я помещаю окно поиска и добавляю скрипт, который теоретически должен работать, но это не так.

Это моя таблица с полем ввода:

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" >
<thead>
<tr>
    <th>Id</th>
    <th>Nome</th>
    <th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
    <td th:text="${patient.id}">1</td>
    <td th:text="${patient.name}">w</td>
    <td th:text="${patient.surname}">e</td>
    <td> <a href="show?id=10" th:href="@{show(idPatient=${patient.id} , idDoctor=${doctor.id})}"> show </a></td>
    <td> <a href="addPrescription?id=10" th:href="@{newPrescription(idPatient=${patient.id} , idDoctor=${doctor.id})}"> add prescription </a></td>
</tr>
</tbody>

Это сценарий:

 <script>
$(document).ready(function(){
    $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

Это библиотеки, которые я импортировал в head:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Может кто-нибудь, пожалуйста, помочь мне понять, что я сделал не так?

Ответ №1:

ваш идентификатор таблицы неверен в вашем скрипте, попробуйте это:

 $(document).ready(function(){
    $("#myInput").on("input", function() {
        var value = $(this).val().toLowerCase();
        $("#mytable tr").filter(function() {
            if($(this).text().toLowerCase().indexOf(value) === -1){
              $(this).hide();
            }else{
              $(this).show();
            }
        });
    });
}); 
 <input type="text" id="myInput" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" >
<thead>
<tr>
    <th>Id</th>
    <th>Nome</th>
    <th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
    <td th:text="${patient.id}">1</td>
    <td th:text="${patient.name}">w</td>
    <td th:text="${patient.surname}">e</td>
    <td> <a href="show?id=10" th:href="@{show(idPatient=${patient.id} , idDoctor=${doctor.id})}"> show </a></td>
    <td> <a href="addPrescription?id=10" th:href="@{newPrescription(idPatient=${patient.id} , idDoctor=${doctor.id})}"> add prescription </a></td>
</tr>
</tbody>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Метки: