如何通过更改hover上的边框来使html表突出显示列？ [英] How can a html table highlight columns by changing the border on hover?

问题描述

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

I'm exploring how to style a table in such a way that the border can be changed when the mouse hovers over a column.

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

When the mouse is over a column, I want to highlight that column by changing the border color:

要突出显示，我使用以下JavaScript代码与jQuery库：

To highlight, I am using the following JavaScript code with the jQuery library:

$('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/
这只有工作时，我把鼠标悬停在左边 - 最多列。否则，它将突出显示右列（和顶部），但不突出显示左侧垂直列。是否有一种方法让左垂直列出现？

You can view how this works in this JSFiddle: http://jsfiddle.net/sCFjj/1/ This is only working when I hover on the left-most column. Otherwise it highlights the right-column (and top) but not the left vertical column. Is there a way of making the left-vertical column appear?

理想情况下，我想要的效果忽略最下面一行，但我不知道如何排除

Ideally, I would like the effect to ignore the lowest row, but I am not sure how to exclude a row from the jQuery selection.

我基于上一次的尝试问题。

推荐答案

链接： jsFiddle 。也添加到上一个collumn边界右，你会得到你想要的。我认为collumn的右边框在下一个collumn左边框。

Link: jsFiddle. Also add to previous collumn border-right and you will get that you want. I think that collumn's right border is over next collumn left border.

JavaScript：

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

希望我解决了您的问题。

Hope I solved your problem.

这篇关于如何通过更改hover上的边框来使html表突出显示列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！