如何用JS/jQuery实现表格按姓名和邮箱本地搜索过滤？

嘿，别慌！作为jQuery新手，这个搜索功能其实比你想的简单，完全不用AJAX，纯前端就能搞定。我给你拆解关键逻辑，再贴完整可运行的代码，你一看就懂～

核心逻辑拆解 #

其实就是这几步：

• 拿到输入框的关键词，统一转成小写（避免大小写敏感的坑）
• 遍历表格里的每一行数据
• 提取当前行的姓名和邮箱文本，也转成小写
• 判断这两个文本里是否包含关键词：匹配就显示行，不匹配就隐藏

完整可运行代码 #

<input id="searchme" name="searchme" type="text" class="form-control" placeholder="输入姓名或邮箱搜索">
<table border="1" cellpadding="8">
  <thead>
    <tr><th>Name</th><th>Email</th><th>Status</th><th>Date</th></tr>
  </thead>
  <tbody>
    <tr><td>Nameone</td><td>oneName@email.com</td><td>Active</td><td>2024-01-01</td></tr>
    <tr><td>NameTwo</td><td>twoName@email.com</td><td>Inactive</td><td>2024-02-01</td></tr>
    <tr><td>Jane Doe</td><td>jane.doe@email.com</td><td>Active</td><td>2024-03-01</td></tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).on('keyup', '#searchme', function() {
  // 1. 获取输入关键词，转小写+去前后空格，优化体验
  const searchTerm = $(this).val().trim().toLowerCase();
  
  // 2. 遍历所有数据行
  $('table tbody tr').each(function() {
    // 3. 提取当前行的姓名（第1列）和邮箱（第2列）文本
    const name = $(this).find('td:first').text().toLowerCase();
    const email = $(this).find('td:nth-child(2)').text().toLowerCase();
    
    // 4. 判断匹配：只要姓名或邮箱包含关键词，就显示，否则隐藏
    const isMatch = name.includes(searchTerm) || email.includes(searchTerm);
    $(this).toggle(isMatch); // toggle方法：true显示，false隐藏，比show/hide更简洁
  });
  
  // 额外优化：如果输入为空，显示所有行（其实上面的toggle也会自动处理，但加个判断更清晰）
  if (!searchTerm) {
    $('table tbody tr').show();
  }
});
</script>

新手友好的细节说明 #

1. 为什么转小写？
   比如用户输入"One"，表格里是"Nameone"，不转大小写的话就匹配不到，统一转小写就能解决大小写敏感的问题。
2. toggle()是什么？
   这是jQuery的快捷方法，替代了if...else里的show()和hide()，传入true就显示元素，false就隐藏，代码更简洁。
3. trim()的作用？
   去掉用户输入的前后空格，避免不小心输入空格导致搜索不到结果的尴尬。
4. 怎么定位列？
   • td:first：选中当前行的第一个<td>（姓名列）
   • td:nth-child(2)：选中当前行的第二个<td>（邮箱列），这个写法比eq(1)更直观（因为nth-child是从1开始计数的）

可选优化（进阶小技巧） #

如果想要更灵活的模糊匹配（比如支持部分拼音、首字母），可以用正则表达式替代includes()，比如：

const regex = new RegExp(searchTerm, 'i'); // 'i'表示忽略大小写
const isMatch = regex.test(name) || regex.test(email);

不过对于新手来说，includes()已经足够好用啦～

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