如何让HTML表格指定行内除空td外的单元格响应点击？

现有如下HTML代码：

<table>             
    <tr id='changeOnClick'>
    <td></td>
    <td id="metre_" >Metre</td>
    <td id="centimetre_">Centimetre</td>
    <td id="fermi_" >Fermi</td>
    </tr>
</table>

以及如下JavaScript代码：

document.getElementById('chooseid').onclick = start;
function start(){
    // Do something...
}

需求：让start()函数仅响应<tr id='changeOnClick'>内除第一个空<td>外的单元格点击，空<td>不触发该函数。曾尝试用<div>包裹非空<td>但无效，求解决方法。

解决方案 #

方法1：在事件处理函数内判断触发元素 #

先把事件绑定到目标tr上（注意原代码里的chooseid是笔误，要改成tr的idchangeOnClick），然后在start函数里过滤掉第一个空td：

document.getElementById('changeOnClick').onclick = start;

function start(e) {
    const target = e.target;
    // 先确认点击的是td元素
    if (target.tagName !== 'TD') return;
    
    // 方式一：判断是否是第一个td
    const allTds = Array.from(this.querySelectorAll('td'));
    if (allTds.indexOf(target) === 0) return;

    // 方式二：如果空td确实没有任何内容，也可以用这个判断
    // if (!target.textContent.trim()) return;

    // 这里写你原本要执行的逻辑
    console.log('点击了有效td:', target.id);
}

方法2：直接给目标td单独绑定事件 #

跳过第一个空td，只给后面有内容的td绑定点击事件：

// 获取tr下除第一个td外的所有单元格
const validTds = document.querySelectorAll('#changeOnClick td:not(:first-child)');

// 逐个绑定事件
validTds.forEach(td => {
    td.onclick = start;
});

function start() {
    // 执行你的逻辑
    console.log('点击了', this.textContent);
}

方法3：事件委托+选择器过滤 #

用事件委托绑定tr的点击事件，通过CSS选择器直接匹配符合要求的td：

document.getElementById('changeOnClick').addEventListener('click', function(e) {
    // 匹配tr下除第一个td外的单元格
    if (e.target.matches('#changeOnClick td:not(:first-child)')) {
        // 调用start函数，让this指向触发的td
        start.call(e.target);
    }
});

function start() {
    // 执行逻辑
    console.log('触发有效点击:', this.id);
}

内容的提问来源于stack exchange，提问作者M.Riyan