复制W3Schools代码后无法实现表格筛选的问题排查

问题根源 #

1. 脚本加载顺序错误
   你的筛选脚本写在了jQuery等JS资源引入之前，浏览器执行到这段脚本时，jQuery还未加载，$会被识别为未定义，导致代码完全无法运行。同时你把脚本放在了<tbody>标签内部，属于DOM结构错误，脚本应放在</body>之前或资源引入之后。

2. 表格DOM结构不完整
   代码里的<tbody id="table-body">没有闭合标签，浏览器渲染时会自动修正结构，导致JS选择器#table-body tr无法正确匹配表格行。

3. 关于资源替换的疑问：CDN引入的资源无需本地安装，直接替换链接即可生效，核心问题不在资源版本，而在加载顺序和DOM结构。

修复后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div id="users-table" class="tab-pane container active table-responsive">
  <input class="form-control mb-3" id="my-search-input" type="text" placeholder="Search...">

  <table class="table table-hover text-center">
    <thead class="table-dark">
      <tr>
        <!-- 示例表头 -->
        <th>姓名</th>
        <th>邮箱</th>
        <th>角色</th>
      </tr>
    </thead>
    <tbody id="table-body">
      <!-- 示例表格行 -->
      <tr>
        <td>张三</td>
        <td>zhangsan@example.com</td>
        <td>管理员</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>lisi@example.com</td>
        <td>普通用户</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>wangwu@example.com</td>
        <td>普通用户</td>
      </tr>
    </tbody> <!-- 闭合tbody标签 -->
  </table>
</div>

<!-- 先引入JS资源 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 再放置筛选脚本 -->
<script>
$(document).ready(function(){
  $("#my-search-input").on("keyup", function() {
    let value = $(this).val().toLowerCase();
    $("#table-body tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</body>
</html>

验证与调试步骤 #

• 确保所有HTML标签正确闭合，尤其是<tbody>、<table>等容器标签。
• 所有外部JS资源（jQuery、Bootstrap）必须在自定义脚本之前引入，保证$等全局对象已定义。
• 测试时打开浏览器控制台（F12），查看是否有"$ is not defined"这类报错，直接指向加载顺序问题。

内容的提问来源于stack exchange，提问作者Sergey Zolotarev