我的带有 javascript 的表格过滤器不起作用

Posted 2023-04-12

【中文标题】我的带有 javascript 的表格过滤器不起作用

【英文标题】：My table filter with javascript is not working

【发布时间】：2021-01-28 17:54:44

【问题描述】：

我正在使用 springboot 在 intellij 上做一个项目，并且我有一个动态表。我放了一个搜索框并添加了一个脚本，理论上它可以工作，但它没有。

这是我的带有输入框的表格：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="tablePatients"  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)
        );
    );
);

这些是我在头部导入的库：

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

您的脚本中的表格 ID 错误，试试这个：

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