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

Posted 2023-03-06

【中文标题】html表格如何通过更改悬停边框来突出显示列？

【英文标题】：How can a html table highlight columns by changing the border on hover?

【发布时间】：2012-11-09 21:34:19

【问题描述】：

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

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

为了突出显示，我在 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。

【问题讨论】：

左边框消失是因为border-collapse 属性。它默认设置为折叠。

在添加 .highlighted 类后添加 $('tr:last-child td').removeClass('highlighted'); 将“忽略最低行”

@Andy 出于某种原因，这只删除了左侧的样式。 $('tr:last-child td') 是否引用所选列中的最低单元格？我正在尝试将其设置为不同的颜色，但它的行为并不像我想象的那样。

它引用最后一行 (tr) 中的所有单元格 (td)，然后删除该类。如果您更改了颜色，它将影响该行中的所有单元格，但是因为只有您悬停的列应该具有类（.highlighted），所以您只会看到该单元格上的差异

我现在明白$('tr:last-child td') 是如何引用该行的，但我不明白如何使用highlighted。 $('tr:last-child td highlighted')（或各种排列）似乎没有什么不同。

【参考方案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;

希望我解决了你的问题。

【讨论】：

感谢您的建议。我试图在选择时没有水平条，所以它只是一个大矩形，就像我在我的问题中画的那样。是否也可以防止它们变色？

刚刚意识到我只需要使用border-left 和border-right 来代替。

@celenius, jsFiddle 现在它只在你想要的图像示例中为水平和上下着色。

关于highlightingPrev：与所有事物相同的边界颜色应用最左边或最上面的单元格边框-w3.org/TR/CSS21/tables.html#border-conflict-resolution。

【参考方案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');
);

如果您发现更好的东西，请告诉我们；）

【参考方案3】：

表格边框折叠

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

border-collapse: separate;

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

然后可以通过其他样式移除内部样式并仅突出显示外部样式。

【参考方案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;