点击表格行内锚点获取指定td元素（jQuery closest用法）求助

我有如下表格结构：

<table>
    <tr>
        <td id="name">Name</td>
        <td>Surname</td>
        <td>Date</td>
        <td>City</td>
        <td>ZIP</td>
        <td><a href="#" onclick="GetElement(this)">Get Element</a></td>
    </tr>
    <tr>
        <td id="name">Name2</td>
        <td>Surname2</td>
        <td>Date2</td>
        <td>City2</td>
        <td>ZIP2</td>
        <td><a href="#" onclick="GetElement(this)">Get Element</a></td>
    </tr>
</table>

点击每行的锚点链接时，我想获取该行的第1、3、4个<td>元素。尝试用jQuery的closest()方法实现，但返回undefined，当前代码如下：

function GetElement(e){
    var elem = $(e).closest("#name").text();
    console.log(elem);
}

问题根源 #

1. ID重复违规：HTML规范要求ID必须唯一，你给两行的第一个<td>都加了id="name"，这会导致选择器定位逻辑混乱。
2. closest()用法错误：closest()仅向上查找当前元素的祖先节点，而#name是当前<a>所在行的兄弟<td>，不属于祖先层级，自然找不到目标元素，返回undefined。

正确实现步骤 #

先修正ID重复问题（改成class或直接靠位置选择），再通过<a>定位到所在行，最后选取对应位置的<td>：

修正后的表格（可选，规范ID）

<table>
    <tr>
        <td class="name">Name</td>
        <td>Surname</td>
        <td>Date</td>
        <td>City</td>
        <td>ZIP</td>
        <td><a href="#" onclick="GetElement(this)">Get Element</a></td>
    </tr>
    <tr>
        <td class="name">Name2</td>
        <td>Surname2</td>
        <td>Date2</td>
        <td>City2</td>
        <td>ZIP2</td>
        <td><a href="#" onclick="GetElement(this)">Get Element</a></td>
    </tr>
</table>

可运行的JavaScript代码

function GetElement(e) {
    // 定位当前链接所在的行
    const $row = $(e).closest('tr');
    // 选取第1、3、4个td（jQuery的eq()从0开始计数）
    const td1Text = $row.find('td').eq(0).text();
    const td3Text = $row.find('td').eq(2).text();
    const td4Text = $row.find('td').eq(3).text();

    console.log('第1个td:', td1Text);
    console.log('第3个td:', td3Text);
    console.log('第4个td:', td4Text);

    // 如果需要获取元素本身而非文本，去掉.text()即可
    // const td1 = $row.find('td').eq(0);
}

关键说明 #

• closest('tr')是核心逻辑：从<a>向上查找最近的<tr>，精准定位当前点击的行。
• eq(index)的索引从0开始，因此第1个<td>对应eq(0)，第3个对应eq(2)，第4个对应eq(3)。
• 即使不修改ID，上述代码也能正常工作，因为是基于元素位置进行选取的。

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