JS点击HTML表格行无法正确获取被点击单元格文本值问题

• opt1版本尝试获取被点击单元格文本时，因alert写在for循环内部，执行时会依次弹窗输出表格所有行对应单元格内容
• opt2版本将alert移到循环外后，仅能获取表格最后一行的单元格文本，无法返回实际点击的目标单元格内容
• 核心诉求：仅获取单次点击对应的目标单元格textContent，不需要其他无关单元格内容
• 现有表格结构为<tr>标签嵌套多个<td>单元格，两个版本实现均不符合预期：opt1返回所有name类单元格文本，opt2仅返回最后一个name类单元格文本

HTML结构 #

<table id="table">
        <tr class="cell" onclick="RowHandlers()">
            <td class="name">Name</td>
            <td class="date">Date</td>
            <td class="subject">Subject</td>
        </tr>
    </table>

opt1版本JS #

function RowHandlers() {
    var table = document.getElementById("table");
    var name;
    for (var i=1;i<table.rows.length;i++) {

        name = table.rows[i].cells[0].innerText;

        alert(name);
    }
   
}

opt2版本JS #

function RowHandlers() {
    var table = document.getElementById("table");
    var name;
    for (var i=1;i<table.rows.length;i++) {

        name = table.rows[i].cells[0].innerText;

       
    }
    alert(name);
}

两个版本的逻辑都在主动全量遍历表格行，完全没有通过点击事件定位实际触发源，必然拿不到精准结果：

• opt1遍历过程中每取到一行的值就弹一次窗，自然会把所有遍历到的内容挨个弹出
• opt2循环结束后，变量name存储的是最后一次遍历的赋值结果，所以只能拿到最后一行的值
• 额外问题：循环起始下标设为i=1，如果表格只有示例里的1行数据，循环根本不会执行，会直接弹出undefined；且当前点击事件绑定在<tr>上，默认点击该行任意单元格都会触发回调，现有逻辑完全没有区分点击源。

不需要循环遍历全表，直接通过事件对象拿到点击源即可：

1. 修改HTML上的事件绑定，传入事件对象：

<table id="table">
    <tr class="cell" onclick="RowHandlers(event)">
        <td class="name">Name</td>
        <td class="date">Date</td>
        <td class="subject">Subject</td>
    </tr>
    <!-- 可添加多行测试验证效果 -->
    <tr class="cell" onclick="RowHandlers(event)">
        <td class="name">张三</td>
        <td class="date">2024-05-20</td>
        <td class="subject">数学</td>
    </tr>
</table>

2. 修改JS逻辑，直接定位点击目标：

function RowHandlers(e) {
    // e.target就是用户实际点击的td元素
    const clickedEl = e.target;
    // 如果需求是：不管点当前行哪个位置，都拿该行class为name的单元格内容，用这行
    const targetNameText = clickedEl.closest('tr').querySelector('.name').textContent.trim();
    alert(targetNameText);

    // 如果需求是：点哪个单元格就拿哪个单元格的内容，直接用下面这行即可
    // alert(clickedEl.textContent.trim())
}

• DOM事件触发时会生成自带的事件对象，传入回调后可以通过target属性直接拿到最底层被点击的元素，不受事件绑定在父级tr上的影响
• closest('tr')会从点击元素向上查找最近的tr行节点，再在当前行范围内查找name类单元格，不会串到其他行
• 全程不需要遍历全表，没有多余循环，不会出现多次弹窗、拿错行值的问题

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