jQuery匹配含特殊字符的表格单元格值问题求助

你的代码核心问题是错误使用了.val()方法获取表格单元格内容——.val()仅适用于input、select这类表单控件，表格<td>元素的文本内容需要用.text()提取。空格和特殊字符本身不需要转义，是获取内容的方式不对导致匹配失败。

修正后的代码 #

<table>
   <tr>
       <td><input type='text' id='filter'></td>
   </tr>
   <tr>
      <td id='1'>12345</td>
      <td id='2'>apdfo:ffekl</td>
      <td id='3'>some string</td>
   </tr>
</table>

<script>
$('#filter').keyup(function(){
    var inputValue = $(this).val().trim(); // 去除输入内容前后空格
    $('td').each(function(){
        // 跳过包含输入框的单元格（可选，避免匹配到输入框所在的td）
        if ($(this).find('#filter').length > 0) return;
        
        var cellText = $(this).text().trim(); // 获取单元格文本并去除前后空格
        if (cellText === inputValue) {
            // 执行匹配后的操作，比如高亮单元格
            $(this).css('background-color', '#ffeb3b');
        } else {
            // 恢复默认样式
            $(this).css('background-color', '');
        }
    });
});
</script>

关键修改点 #

• 替换.val()为.text()：正确提取<td>的文本内容，不管是纯数字、带冒号还是带空格的字符串都能准确获取。
• 添加.trim()：处理输入或单元格内容前后的空白字符，避免因意外空格导致匹配失败。
• 可选跳过输入框所在单元格：避免遍历到包含#filter的<td>，防止无效匹配。

如果需要支持部分内容匹配（比如输入"apd"就能匹配"apdfo:ffekl"），可以把严格相等判断改成字符串包含检查：

if (cellText.includes(inputValue)) {
    // 执行操作
}

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