我正在探索如何设置表格样式,以便在鼠标悬停在列上时可以更改边框。
当鼠标悬停在一列上时,我想通过更改边框颜色来突出显示该列:
为了突出显示,我将以下 JavaScript 代码与 jQuery 库一起使用:
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').removeClass('highlighted');
});
使用以下 CSS:
.highlighted {
border-top: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
}
您可以在这个 JSFiddle 中查看它是如何工作的:http://jsfiddle.net/sCFjj/1/ 这仅在我将鼠标悬停在最左侧的列上时才有效。否则它突出显示右列(和顶部)而不是左垂直列。有没有办法让左竖列出现?
理想情况下,我希望效果忽略最低行,但我不确定如何从 jQuery 选择中排除行。
我的尝试基于之前的 question .
最佳答案
链接:jsFiddle .还要添加到前一列 border-right,你会得到你想要的。我认为该列的右边界在下一列的左边界之上。
JavaScript:
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').addClass('highlighted');
if(t>1){
var t1 = t -1;
//alert("T:" + t + "<br/> T1:" + t1);
$('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
}
},
function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').removeClass('highlighted ');
if(t>1){
var t1 = t -1;
$('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
}
});
CSS:
.highlighted {
border: 2px solid black;
}
.highlightedPrev {
border-right: 2px solid black;
}
希望我解决了你的问题。
关于javascript - html 表格如何通过更改悬停时的边框来突出显示列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13496559/