Question

我正在尝试在联系人表中实现搜索功能，但脚本无效。

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

-

<link rel="stylesheet" href="contactsstyle.css">
<script src="contacts_script.js"></script>
<script src="search_script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>`
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onClick="closeNav()">&times;</a>
  <a href="contact_department.html">Contact by Department</a>
  <a href="contact_administrator.html">Contact by Administrator</a>
</div>`

<div id="main">
  <span style="font-size: 30px; cursor:pointer" onClick="openNav()">&#9776;open</span>
</div>

<input id="myInput" type="text" placeholder="Search...">
<br><br>

<tbody id="myTable">
  <tr>`
    <td><img src="img/(4x5)-female-placeholder.jpg" width="80" height="100" alt="" /></td>
    <td>Jane Doe</td>`

    <td>Test</td>
    <td>jane.doe@test.com</td>`
    <td>000-000-0000</td>
  </tr>`

</tbody>
</table>

Answer 1

您错过了#

的＆符$("myTable tr")

代码应为：

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

新年快乐！

搜索功能脚本不起作用

1 个答案: