javascript - 纯Javascript表列的悬停效果如何？

我需要HTML表列具有纯Javascript(无jQuery)悬停效果。

我发现this应该包含Firefox的修复程序，但对我来说仍然看起来很破旧。

我发现this仅适用于第一列。

不幸的是，我的JavaScript技能充其量是业余的，因此我尝试修改其中任何一个都没有结果。

这可能吗？任何建议，将不胜感激。

最佳答案

这是一种基于列的方法。当鼠标进入/离开一个单元格时，通过索引找到相应的 <col/> 并应用/删除所需的类:

(() => {
  const myTable = document.getElementById("myTable");
  const cols = myTable.querySelectorAll("col");
  const events = {
    mouseover: e => {
      const t = e.target.closest("td");
      if (t) {
        const cellIndex = t.cellIndex;
        for (let i = 0, n = cols.length; i < n; i++) {
          cols[i].classList[i === cellIndex ? "add" : "remove"]("hovered");
        }
      }
    },
    mouseout: e => {
      const t = e.target;
      if (t.nodeName === "TD" && !t.contains(e.relatedTarget)) {
        cols[t.cellIndex].classList.remove("hovered");
      }
    }
  };
  for (let event in events) {
    myTable.addEventListener(event, events[event]);
  }
})();

.hovered {
  background-color: #FF0000;
}

<table id="myTable" cellspacing="0">
  <col />
  <col />
  <col />
  <tbody>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col2
        <span>nested</span>
      </td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
  </tbody>
</table>

也可以看看:

Element.classList

Node.Contains()

Element.Closest()