点击表格行添加选中色并清除其他行active类的问题排查

• 第一处错误：初始化tbodyRows时，使用table.getElementsByTagName("tr")[0]仅获取了整个表格的第一个<tr>元素（即表头行），既没有拿到tbody下的所有数据行，也只取到了单个元素而非行集合。
• 第二处错误：点击事件触发时，仅移除了单个表头行的active类，没有遍历所有数据行清除已有的选中状态，导致之前选中的行样式一直保留。

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];

tbody.onclick = function (e) {
    e = e || window.event;
    var target = e.srcElement || e.target;
    // 向上查找点击的目标行
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    // 排除点击到tbody空白区域未匹配到行、或者点击到表头行的情况
    if (!target || target.parentNode !== tbody) return;
    // 获取tbody下所有行，遍历清除active类
    var allTbodyRows = tbody.getElementsByTagName("tr");
    for (var i = 0; i < allTbodyRows.length; i++) {
        allTbodyRows[i].classList.remove('active');
    }
    // 给当前点击行添加选中样式
    target.classList.add('active');
}

如果你的表格行是静态渲染不会后续新增的，可以把allTbodyRows的获取逻辑放到事件外，避免每次点击都查询DOM提升性能；如果是动态新增行的场景，放在事件内每次查询更稳妥。

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