javascript - html表格如何通过更改悬停边框来突出显示列？

Question

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

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

为了突出显示，我将以下 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 选择中排除一行。

我的尝试密切基于这个先前的问题。

Answer 1

链接：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;
}

希望我解决了你的问题。

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 个像素。

然后，附加样式可以移除内部样式并仅突出外部样式。

Answer 4

试试这个：http: //jsfiddle.net/sCFjj/27/

我添加了一个 highlight_left，并稍微简化了 javascript（删除了所有单元格的突出显示类）

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

highlight_left 是：

.highlighted_left{
    border-right: 2px solid black;
}