我需要一个纯 Javascript（无 jQuery）HTML 表格列的悬停效果。
我发现 this 据称包含 Firefox 的修复程序，但在我看来它仍然损坏。
我发现this 仅适用于第一列。
不幸的是，我的 Javascript 技能充其量是业余的，所以我尝试修改其中任何一个都没有结果。
这可能吗？任何建议，将不胜感激。
【问题讨论】：
标签： javascript css html-table
这是一种基于列的方法。当鼠标进入/离开单元格时，通过索引找到对应的<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.@987654322@Node.@987654323@Element.@987654324@【讨论】：
td 在您将鼠标悬停在它的一个孩子（即嵌套图像）上时会发送一个mouseout 事件。您可以检查e.toElement 是否是td 的后代，如果是，则停止传播。
这是您的代码 (+ demo)：
var HOVER_CLASS = 'hovered';
var hovered;
table.addEventListener('mouseover', function (e) {
if (e.target.tagName.toLowerCase() == 'td') {
var index = e.target.cellIndex;
hovered && hovered.forEach(function (cell) {
cell.classList.remove(HOVER_CLASS);
});
hovered = Array.prototype.map.call(
table.rows,
function (row) {
var i = index;
while (!cell && i >= 0) {
var cell = row.cells[i];
i -= 1;
}
return cell;
}
);
hovered.forEach(function (cell) {
cell.classList.add(HOVER_CLASS);
});
}
}, true);
table.addEventListener('mouseout', function (e) {
hovered && hovered.forEach(function (cell) {
cell.classList.remove(HOVER_CLASS);
});
hovered = null;
}, true);
我能想到的最佳方法是给每个 <td> 一个类名，以标识它所在的列。即“col1、col2 等”
然后你可以使用document.getElementsByClassName("colX")函数获取那些<td>s的数组，遍历数组并修改样式。警告，这可能不适用于没有 getElementsByClassName 函数的旧浏览器，但您可以轻松找到解决方法。最好的方法是使用 jQuery，不知道你为什么反对它。
【讨论】：
你在 css 中创建一个类
.HoverTabla > tbody > tr:hover,
.HoverTabla > tbody > tr:focus {
background-color: #42C6F7;
}
然后你从 html 中的表中调用它
<table class="table HoverTabla" id="tbl_Plan">
<thead>
<tr>
<th>Tipo de plan</th>
<th>Tiempo en días</th>
<th>Max. Usuario</th>
<th>Max. Capacidad</th>
<th>Max. Casos</th>
<th>Valor plan</th>
<th></th>
</tr>
</thead>
</table>
【讨论】：
经过一番谷歌搜索后，我找到了纯 CSS 的答案：https://css-tricks.com/simple-css-row-column-highlighting/
表格中的每个单元格（<td>）都通过伪元素进行了一些填充，用于创建悬停效果。为了确保悬停效果不会超出表格本身，使用了overflow: hidden。
文章中的副标题总结了这一切：“诀窍是在<td>s 上使用巨大的伪元素，被表格溢出隐藏”
【讨论】：
试试
<td onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">
【讨论】：
这将起作用，无需 javascript。因此，即使人们关闭了 javascript，它也应该可以工作。
Jfiddle：http://jsfiddle.net/vJacZ/
HTML：
<table>
<tr>
<td class="column1">
Column1
</td>
<td class="column2">
Column2
</td>
</tr>
</table>
CSS：
.column1{
color:black;
}
.column1:hover{
color:red;
}
.column2{
color:black;
}
.column2:hover{
color:green;
}
【讨论】：