Jquery A-Z数字筛选器问题：含链接数字的行被跳过

这个问题我之前碰到过类似的，核心原因很明确：你当前的代码是直接读取<td>的HTML内容来做正则匹配，但那些包含链接数字的单元格里，实际的HTML结构是带<a>标签的（比如<a href="tel:12345">12345</a>），这时候td.html()拿到的是整个带标签的字符串，自然匹配不上以"A"开头的规则，导致这些行被错误隐藏了。

解决方案：改用纯文本内容做匹配 #

只需要把代码中获取单元格内容的td.html()换成td.text()就可以了，.text()方法会提取单元格里的纯文本内容，完全忽略HTML标签，这样就能正确拿到你需要匹配的实际文本了。

修改后的完整代码如下：

var alphas = 'abcdefghijklmnopqrstuvwxyz';
var tmp = '';
for (var x = 0; x < 26; x++)
  tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a>&nbsp;&nbsp;';
$('#table_filter').append(tmp);
$('#table_filter a').click(function () {
  if ($(this).attr('id') == 'show_all') {
    $('#searchNames tbody tr').css('display', 'table-row');
    $('#message').html('displaying all rows');
    return false;
  }
  var alpha = $(this).html();
  $('#searchNames tbody tr').hide().filter(function () {
    var td = $('td:first', $(this));
    // 关键修改：用text()替代html()获取纯文本内容
    return td.length && td.text() && new RegExp('^' + alpha + '.*$', 'i').test(td.text().toLowerCase());
  }).css('display', 'table-row');
  $('#message').html('displaying rows with "' + alpha + '"');
  return false;
})

额外优化建议 #

如果你的表格里可能存在空的单元格，可以在判断里加个容错处理，避免因为空文本导致的匹配异常，比如把判断条件调整为：

return td.length && $.trim(td.text()) && new RegExp('^' + alpha + '.*$', 'i').test($.trim(td.text()).toLowerCase());

用$.trim()去掉文本前后的空白字符，这样即使单元格里只有空格也不会被误匹配。

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