使用jQuery通过table类名选择td元素失效如何解决

是的，类名使用错误是选择器失效的直接原因。你当前使用的$(".classname tbody tr td")属于单个类名选择器，仅能匹配仅包含classname这一个类的元素，但你的table元素同时包含三个独立类名：table、name、name-surname，单个类名选择器无法匹配该元素。

• 代码执行时机错误：如果你的JS代码在HTML结构渲染完成前就执行，会找不到还未生成的DOM节点，需要将选择器逻辑放在DOM加载完成的回调中。
• 元素是动态生成的：如果该table是页面加载完成后通过接口、前端渲染逻辑动态插入到DOM中的，页面初始化时执行的选择器无法匹配到后续生成的节点。
• 类名拼写错误：需要核对类名的大小写、短横线、空格是否和HTML中的定义完全一致。

你无需修改table的类名或新增id，可使用以下几种方案实现元素选择：

1. 多类名联合选择
   多个类名直接拼接（中间不要加空格，空格代表后代选择逻辑），即可匹配同时包含所有指定类名的元素：

// 精确匹配同时携带三个类名的table下的td元素
$("table.table.name.name-surname tbody tr td")

// 结合父级.tab类缩小匹配范围，避免匹配到页面其他同类名元素
$(".tab .table.name.name-surname tbody td")

2. 动态元素事件委托
   如果table是动态生成的，可将事件绑定到页面加载时就存在的父级元素上，通过事件委托匹配目标元素：

// 示例：给td绑定点击事件，委托到已存在的父级.tab元素上
$(".tab").on("click", "tbody tr td", function() {
  // 此处this即为触发点击事件的td元素
  console.log($(this).text())
})

3. 属性选择器兜底
   也可以使用class属性全匹配写法，要求属性值和HTML中的class定义完全一致（空格、类名顺序都不能变动）：

$('table[class="table name name-surname"] tbody td')

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