本文介绍如何在纯前端环境下实现表格数据的模糊查询功能。通过遍历表格行并调用字符串的indexOf方法，判断单元格内容是否包含指定关键字。该方法无需后台交互，适用于简单的本地数据筛选场景，帮助开发者快速实现用户输入关键词后的列表高亮或过滤效果。
模糊查询原理与前端应用
首先需要明确模糊查询的核心逻辑：即根据用户输入的关键字，从列表中提取出包含该关键字的项。这本质上是一个字符串匹配问题，即判断列表中的每一项是否包含特定的字符或子字符串。
本示例仅展示前端页面的处理逻辑，不涉及后端数据交互，旨在演示如何对当前页面表格中的每一行数据进行关键字匹配筛选。
实现该功能主要依赖JavaScript字符串对象的indexOf方法。该方法用于查找指定字符或字符串在源字符串中首次出现的位置索引；若未找到目标内容，则返回-1。
具体实现代码如下：
基于indexOf的表格筛选实现
<meta charset="UTF-8">
<title></title>
<table id="Result1">
<tbody><tr>
<th></th>
<th>账户名称</th>
<th>账户</th>
<th>户名简称</th>
<th>开户行号</th>
<th>开户行名称</th>
<th></th>
</tr>
<tr class="dim-check">
<td></td>
<td><input type="text" maxlength="50" id="accountNameStr" name="1" value=""></td>
<td><input type="text" maxlength="50" id="accountNoStr" name="2" value=""></td>
<td><input type="text" maxlength="50" id="accountShortStr" name="3" value=""></td>
<td><input type="text" maxlength="50" id="branchBankNoStr" name="4" value=""></td>
<td><input type="text" maxlength="50" id="branchBankNameStr" name="5" value=""></td>
</tr>
<tr>
<td><input type="radio" name="accounts" value="634"></td>
<td>安顺账号1</td>
<td>060156300000123</td>
<td>简称123</td>
<td>31375635312</td>
<td>中国银行股份有限公司</td>
</tr>
<tr>
<td><input type="radio" name="accounts" value="634"></td>
<td>安顺账号2</td>
<td>0601001100000123</td>
<td>安顺账号2-简称123</td>
<td>3137565012</td>
<td>南京银行股份有限公司</td>
</tr>
<tr class="">
<td><input type="radio" name="accounts" value="634"></td>
<td>安顺账号3</td>
<td>0601001154520123</td>
<td>安顺账号215</td>
<td>38968599012</td>
<td>建行有限公司</td>
</tr>
</tbody></table>以上即为前端表格模糊查询的完整实现方案。希望本文内容能为您的学习或工作提供实用参考，欢迎继续支持本站获取更多技术分享。