这里提供一种基于列的方法。当鼠标进入/离开单元格时,通过索引查找相应的<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()
td
在你悬停在它的子元素(即嵌套的图像)上时会发送 mouseout
事件。您可以检查 e.toElement
是否是 td
的后代,如果是,则停止传播。 - canonvar 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);
classList
和map
/forEach
部分进行处理。 - katspaugh我能想到的最好方法是给每个 <td>
元素赋予一个标识其所在列的类名,例如 "col1, col2" 等。
然后,您可以使用 document.getElementsByClassName("colX")
函数获取这些 <td>
元素的数组,循环遍历该数组并修改样式。请注意,这种方法可能无法在旧浏览器中正常工作,因为它们不支持 getElementsByClassName 函数,但是您可以轻松找到解决方法。其中最好的方法是使用 jQuery,不确定您为什么反对它。
.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>
<td>
)都通过伪元素给出一些填充,用于创建悬停效果。为确保悬停效果不会延伸到表格之外,使用了overflow: hidden
。<td>
上使用巨大的伪元素,它们被表格溢出隐藏"尝试一下
<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;
}