html表格如何通过改变悬停时的边框来突出显示列？

Question

我正在探索如何设置表格的样式，以便当鼠标悬停在列上时可以更改边框。

​

​

当鼠标悬停在列上时，我想通过更改边框颜色来突出显示该列：

​

​

为了突出显示，我在jQuery库中使用了以下JavaScript代码：

$('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。

Answer 1

链接：jsFiddle。另外，添加到以前的列边框-右，你会得到你想要的。我想那列的右边界在下一列的左边界之上。

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;
}

希望我解决了你的问题。

Answer 2

似乎每一行都在他的“右邻居”之上，所以它们相互重叠。您可以更深入地研究原因，或者只需使用以下命令进行修复：

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');
    $('td:nth-child(' + (t-1) + ')').addClass('highlighted_only_right');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted');
    $('td:nth-child(' + (t-1) + ')').removeClass('highlighted_only_right');
});

如果你找到更好的东西，请告诉我们;)

Answer 3

表格边框折叠

你面临的问题是表格在默认情况下会折叠边框。所以你必须在表格本身上设置一个额外的样式：

border-collapse: separate;

这也意味着你的边框需要有1个像素的边框，因为同级边框会增加到2个像素。

然后，额外的样式可以删除内部样式，只突出显示外部。