搜索框应绑定input事件，用filter()遍历tbody内tr元素，依据textContent.toLowerCase().includes(keyword)控制display；需显式添加tbody标签，关键词和单元格文本统一replace(/\s+/g,' ').trim()处理空白符。
搜索框怎么绑定到表格行过滤
直接监听 input 事件，用 filter() 遍历 <tr> 元素（跳过表头），根据单元格文本是否包含关键词决定 <code>style.display 是 '' 还是 'none'。别用 innerHTML 重绘整表——性能差、会清空用户已输入的表单内容（比如某行有 <input type="text">）。
常见错误：把搜索逻辑写在 keyup 里却没处理空字符串，导致清空输入框后所有行消失；或者用 textContent 但没 trim，前后空格干扰匹配。
- 用
event.target.value.trim().toLowerCase()作关键词，避免空格和大小写问题 - 遍历从
tbody.querySelectorAll('tr')开始，不碰thead - 匹配逻辑用
cell.textContent.toLowerCase().includes(keyword)，别用indexOf手动判断
表格结构必须带 <tbody> 吗
<p>必须。没有 <code><tbody> 时，<code>document.querySelectorAll('table tr') 会把表头也包进来，过滤时可能误隐藏 <th> 行；更糟的是，某些浏览器会自动补 <code><tbody>，但脚本执行时机不确定，导致第一次过滤漏掉部分行。
<p>实操建议：哪怕只有一行数据，也显式写出 <code><tbody>。HTML5 允许省略，但 JS 操作时它就是刚需。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li><code><table>
<thead><tr>
<th>姓名</th>
<th>城市</th>
</tr></thead>
<tbody><tr>
<td>张三</td>
<td>杭州</td>
</tr></tbody>
</table>
<table>
<tr><th>...</th></tr>
<tr><td>...</td></tr>
</table>
中文搜索失效或匹配不准怎么办
不是编码问题，是默认行为没做全字符匹配。浏览器对中文的 textContent 获取是准确的，但如果你的表格里混用了空格、全角/半角符号、换行符，includes() 就会失败。
典型现象：搜“杭州”搜不到，但搜“杭 州”（中间有空格）能搜到；或单元格里实际是 <td>杭州 </td>， 被转成普通空格后多了一个。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 预处理关键词和单元格文本：统一用
.replace(/\s+/g, ' ').trim()压缩空白符 - 避免在 HTML 中直接写
- 如果数据来自接口，后端返回前就 trim 字段，比前端补救更可靠
怎么让搜索支持多列独立条件（比如城市=杭州 且 姓名含“张”）
基础单框搜索做不到，得升级交互。最轻量的做法是：加两个 <input>，分别标 data-column="name" 和 data-column="city"，JS 读取各自值，再对每行做 AND 判断。
注意点不在代码多几行，而在「空条件不参与过滤」——否则填了姓名没填城市，结果反而为空。
- 每个输入框的值都
.trim()，空字符串就跳过该列校验 - 用布尔变量累积结果：
let match = true; if (nameVal && !nameCell.includes(nameVal)) match = false; - 列名映射靠
tr.cells[index].dataset.column或硬编码索引（如城市固定第 2 列）
真要复杂条件，别硬撑原生 JS，引入 filter() + every() 组合就行，别碰正则或 AST 解析——极简场景下，够用就是边界。
