JS表格EventListener仅对部分单元格生效问题排查

我用JavaScript创建了一个简易表格，每行包含2个单元格，给每行第一个单元格添加了点击事件，但只有红色高亮的单元格点击才生效。尝试将处理函数移到外部后问题依旧；把for循环初始值改为i=14后，所有单元格的事件都失效了。

原代码 #

function vytvoritTabulku(table, data, mapa) {
    let thead = table.createTHead();
    let row = thead.insertRow();
    let th = document.createElement("th");
    let text = document.createTextNode("Název DTS Stanice");

    th.appendChild(text);
    row.appendChild(th);
    console.log(data.length);

    for (let i = 0; i < data.length; i++){
        let row = table.insertRow();

        let cell = row.insertCell();
        let text = document.createTextNode(data[i].nazev);
        cell.appendChild(text);

        cell.bgColor = "yellow";

        cell.addEventListener("click", () => {
            if (data[i].visible){
                data[i].marker.removeFrom(map);
                //stanice[0].trasaDo.removeFrom(map);
                data[i].trasaZ.removeFrom(map);
                data[i].visible = false;
                console.log("Skryvam");
                cell.bgColor = "Red";
            } else {
                data[i].marker.addTo(map);
                //stanice[0].trasaDo.removeFrom(map);
                data[i].trasaZ.addTo(map);
                data[i].visible = true;
                console.log("Zobrazuji"); 
                cell.bgColor = "yellow";
            }
        });

        let cell2 = row.insertCell();
        text = document.createTextNode("There will be a button");
        cell2.appendChild(text);
    }
}

问题原因 #

1. 代码报错中断执行：黄色单元格对应data[i].visible=true，点击时会执行移除地图元素的逻辑。如果此时data[i].marker或data[i].trasaZ不存在，调用removeFrom会抛出错误，导致后续的颜色切换、状态更新全部中断，看起来像是事件没生效；而红色单元格对应data[i].visible=false，点击时执行添加逻辑，若对应的地图元素存在，代码能正常走完流程，所以看起来只有红色单元格的事件生效。
2. 初始值改为i=14后失效：此时循环处理的data元素中，marker或trasaZ可能都不存在，无论点击哪种单元格都会触发报错，导致事件完全失效。

解决办法 #

• 添加错误捕获与可选链：用try-catch捕获错误，同时用可选链操作符?.避免属性不存在时的报错，保证代码能执行到颜色切换和状态更新：

cell.addEventListener("click", () => {
  try {
    if (data[i].visible){
        data[i].marker?.removeFrom(map);
        data[i].trasaZ?.removeFrom(map);
        data[i].visible = false;
        console.log("Skryvam");
        cell.bgColor = "Red";
    } else {
        data[i].marker?.addTo(map);
        data[i].trasaZ?.addTo(map);
        data[i].visible = true;
        console.log("Zobrazuji"); 
        cell.bgColor = "yellow";
    }
  } catch (err) {
    console.error("点击事件出错:", err);
  }
});

• 统一初始状态：检查data数组的每个元素，确保visible初始值为true（对应单元格初始黄色），且marker、trasaZ在visible=true时已正确添加到地图，visible=false时已从地图移除。

内容的提问来源于stack exchange，提问作者Petr Klíma