JavaScript中%符号能否使用？含%的表格ID致jQuery选择失败问题排查

没错，你的问题确实出在ID里的%符号上！当你用jQuery的$("table#" + id)这种写法时，底层遵循的是CSS选择器语法，而%在CSS选择器中属于具有特殊含义的字符，直接使用未转义的%会导致选择器无法正确匹配到你的表格元素，自然也就获取不到后续的td了——这就是为什么用不含特殊字符的ID时一切正常。

两种可行的解决方案 #

方案1：转义特殊字符 #

按照CSS选择器规则，特殊字符需要用反斜杠\转义。不过在JavaScript字符串里，反斜杠本身也需要转义，所以你需要把%替换成\\%：

function getColumnsVal(id) { 
  // 转义ID中的%特殊字符
  var escapedId = id.replace(/%/g, '\\%');
  var header = $("table#" + escapedId + " thead tr:eq(1)"); 
  var header_fields = $("td", header); 
  alert(header_fields[0]); 
}

方案2：使用属性选择器（更省心） #

如果不想处理转义的麻烦，推荐直接使用jQuery的属性选择器，通过精确匹配id属性来获取元素，这种方式不需要处理任何特殊字符：

function getColumnsVal(id) { 
  // 使用[id="xxx"]属性选择器，直接匹配原始ID值
  var header = $('table[id="' + id + '"] thead tr:eq(1)'); 
  var header_fields = $("td", header); 
  alert(header_fields[0]); 
}

补充说明 #

除了%，CSS选择器里还有不少特殊字符需要注意，比如!、@、$、&等，如果ID或类名中包含这些字符，都需要类似处理——属性选择器通常是最省心的方案，因为它直接匹配属性的原始值，不会触发CSS选择器的特殊解析逻辑。

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