如何导入pandas导出的HTML表格到网页并通过JS实现筛选功能

完全可以用原生JavaScript实现筛选需求，5000行级别的表格纯前端处理性能够用，不需要后端支持。
首先先纠正你现有代码的问题：你用的<link rel="import">是已经被所有主流浏览器废弃的特性，根本没法正常加载外部HTML文件，直接把这行删掉。

推荐方案：纯原生JS实现（无任何依赖） #

整个实现逻辑非常简单：

• 第一步：正确引入表格
  两种方式二选一：
  • 最稳妥无坑：直接把pandas导出的整个<table>代码复制粘贴到主HTML文件的body里，放在搜索按钮下方，不会有跨域问题，双击打开就能用
  • 不想把表格代码塞主文件：用fetch接口加载外部的3BP-OOP-PFR.html，注意这种方式不能直接双击打开HTML文件（file协议会触发跨域限制），用VSCode的Live Server、或者本地执行python -m http.server起个静态服务访问就行
• 第二步：实现筛选逻辑
  核心逻辑就是给搜索按钮绑定事件，遍历表格tbody下的所有行，拿行内文本和输入的筛选关键词做匹配，匹配失败的行设置display: none隐藏，匹配成功的正常显示。

下面是可直接使用的完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flop数据筛选表</title>
  <style>
    .filter-bar {
      margin: 16px 0;
      display: flex;
      gap: 8px;
    }
    #filterInput {
      padding: 6px 12px;
      min-width: 320px;
    }
    .go {
      padding: 6px 16px;
      cursor: pointer;
    }
    table.dataframe {
      border-collapse: collapse;
      width: 100%;
    }
    table.dataframe th, table.dataframe td {
      border: 1px solid #ccc;
      padding: 6px 8px;
    }
    table.dataframe th {
      background: #f5f5f5;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="filter-bar">
    <input type="text" id="filterInput" placeholder="输入关键词筛选，支持牌面、数值匹配">
    <button class="go">Search</button>
  </div>

  <!-- 方式1：直接把pandas导出的表格粘贴在这里，示例如下 -->
  <table border="1" class="dataframe">
    <thead>
      <tr style="text-align: right;">
        <th>Flop</th>
        <th>BET 1610 Freq</th>
        <th>BET 1218 Freq</th>
        <th>BET 575 Freq</th>
        <th>CHECK Freq</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2s 2d 2c</td>
        <td>2.90</td>
        <td>11.91</td>
        <td>36.90</td>
        <td>48.30</td>
      </tr>
      <!-- 剩余的5000行数据直接粘贴到此处即可 -->
    </tbody>
  </table>

  <script>
    const filterInput = document.getElementById('filterInput');
    const searchBtn = document.querySelector('.go');
    const table = document.querySelector('.dataframe');
    const tableRows = table.querySelectorAll('tbody tr');

    function runFilter() {
      const keyword = filterInput.value.trim().toLowerCase();
      // 关键词为空时显示全部行
      if (!keyword) {
        tableRows.forEach(row => row.style.display = '');
        return;
      }
      // 逐行匹配
      tableRows.forEach(row => {
        row.style.display = row.textContent.toLowerCase().includes(keyword) ? '' : 'none';
      });
    }

    // 绑定按钮点击搜索
    searchBtn.addEventListener('click', runFilter);
    // 需要输入实时筛选就放开下面这行注释
    // filterInput.addEventListener('input', runFilter);
  </script>

  <!-- 方式2：加载外部表格文件，用这个就把上面的<table>整块删掉，同时放开下面的script注释，记得用本地HTTP服务打开页面
  <script>
    const filterInput = document.getElementById('filterInput');
    const searchBtn = document.querySelector('.go');
    let tableRows = [];

    fetch('3BP-OOP-PFR.html')
      .then(res => res.text())
      .then(tableHtml => {
        document.querySelector('.filter-bar').insertAdjacentHTML('afterend', tableHtml);
        tableRows = document.querySelector('.dataframe').querySelectorAll('tbody tr');
      })

    searchBtn.addEventListener('click', () => {
      const keyword = filterInput.value.trim().toLowerCase();
      if (!keyword) {
        tableRows.forEach(row => row.style.display = '');
        return;
      }
      tableRows.forEach(row => {
        row.style.display = row.textContent.toLowerCase().includes(keyword) ? '' : 'none';
      });
    })
  </script>
  -->
</body>
</html>

可选优化方向 #

• 需要按列单独筛选的话，就在每列表头加独立输入框，匹配时只取对应列的单元格内容判断即可，逻辑和全表筛选一致
• 需要做数值范围筛选（比如筛选CHECK频率大于50%的行）时，把对应单元格的文本转成数字，和设置的阈值做比较再决定行的显隐即可
• 实测5000行数据下上述原生逻辑单次筛选耗时不到10ms，完全不会有卡顿问题，没必要引入额外的前端表格库增加加载负担。

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