JavaScript获取HTML表格行与单元格点击索引及undefined问题解决

两个核心逻辑错误导致了undefined的结果：

• 执行时序完全错位：你写在循环内部的console.log(rIndex)、console.log(cellIndex)属于页面加载时的同步执行代码，执行updatePrice函数时会立刻跑完所有循环，这个阶段用户还没做任何点击操作，绑定在行、单元格上的点击回调根本不会触发，两个变量还没被赋值，自然打印出undefined。
• 变量作用域缺陷：哪怕把打印语句挪到点击事件回调里，用var声明的rIndex、cellIndex会属于整个函数的全局作用域，加上循环里的闭包共享同一个变量引用，最后所有点击操作拿到的索引都会是循环结束后的最后一个值，不是实际点击的位置。
• 重复绑定触发问题：原代码同时给行、单元格分别绑定点击事件，会因为DOM事件冒泡机制，触发同一个点击的多次回调，造成变量值被重复覆盖的问题。

不需要循环遍历每个行、单元格单独绑定事件，利用DOM自带的索引属性+事件委托的方式，既解决时序问题，也避免作用域bug：

1. 只给整个表格绑定一次点击事件，通过事件对象拿到用户实际点击的单元格
2. 直接读取DOM内置的rowIndex、cellIndex属性获取对应索引，不需要额外定义全局变量存储中间值
3. 所有需要用到索引的业务逻辑，全部放在点击事件的回调内部执行，保证只有用户触发点击时才会读取最新的索引值

function updatePrice() {
    const table = document.getElementsByTagName('table')[0];
    table.onclick = function (e) {
        // 找到点击位置所属的单元格
        const clickCell = e.target.closest('td');
        if (!clickCell) return;

        // 直接读取DOM原生属性获取索引
        const rowIndex = clickCell.parentElement.rowIndex;
        const colIndex = clickCell.cellIndex;

        // 此处放置需要用到索引的业务逻辑
        console.log('当前点击的行索引：', rowIndex);
        console.log('当前点击的单元格索引：', colIndex);
    }
}

• 这种事件委托的写法不需要循环遍历所有行、单元格，性能远高于逐个绑定事件的方案，就算表格后续动态新增、删除行，也不需要重新绑定事件。
• 直接读取DOM原生的索引属性，不存在变量缓存、闭包共享的问题，拿到的索引值和实际点击位置完全一致。
• 单次事件监听不会出现重复触发回调的问题，逻辑执行更稳定。

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