如何通过层级CSS结合JavaScript获取表格TD值（解决undefined问题）

你的代码弹出undefined主要有两个核心问题，我帮你拆解并修正：

问题分析 #

1. 错误的属性获取方式：<td>标签本身并没有value属性，你用.attr('value')去获取内容肯定拿不到结果，应该直接获取它的文本内容。
2. 时机错误的变量赋值：你在页面加载时就固定了ee的值，而且这个值和你点击的具体行没有关联，不管点击哪一行都会用这个提前获取的（错误）值。

修正后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>three</td>
        <td>four</td>
    </tr>
</table>

<script>
$("table").on('click', function (e) {
    e.preventDefault();
    // 定位到当前点击行的第一个td，提取其文本内容
    var ee = $(e.target).closest('tr').find('td:first').text();
    alert(ee);
});
</script>

关键修正点 #

• 把取值逻辑移到点击事件内：每次点击表格时再去定位当前行，确保拿到的是对应点击行的第一个TD内容
• 用.text()获取内容：TD的内容是文本节点，.text()能正确提取纯文本内容（如果需要保留HTML格式可以用.html()）
• 精准定位当前行：$(e.target).closest('tr')可以找到点击元素所在的最近<tr>，再通过.find('td:first')定位到该行第一个TD，哪怕你点击的是行内其他元素，也能正确关联到对应的行

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