javascript - How can a html table highlight columns by changing the border on hover? - Stack Overflow

admin管理员组

文章数量:1287989

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:

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

with the following CSS:

.highlighted {
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-left: 2px solid black;
}

You can view how this works in this JSFiddle: / 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.

I've based my attempt closely on this previous question.

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:

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

with the following CSS:

.highlighted {
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-left: 2px solid black;
}

You can view how this works in this JSFiddle: http://jsfiddle/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.

I've based my attempt closely on this previous question.

• javascript
• html
• css
• html-table
• hover

Share Improve this question Follow edited Jul 17, 2017 at 10:08 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 21, 2012 at 15:30 djqdjq 15.3k4646 gold badges126126 silver badges158158 bronze badges 5

• that the left border disappears is because of the border-collapse property. it is by default set to collapse. – Sven Bieder Commented Nov 21, 2012 at 15:47
• adding $('tr:last-child td').removeClass('highlighted'); after you add the .highlighted class will "ignore the lowest row" – Andy Commented Nov 21, 2012 at 15:48
• @Andy for some reason this only removes the style on the left hand side. Does $('tr:last-child td') reference the lowest cell in the selected column? I was experimenting setting it a different color and it did not behave as I thought it would. – djq Commented Nov 21, 2012 at 16:05
• It references all of the cells (td) in the last row (tr) and then removes the class. If you changed the colour it would affect all cells in that row, but because only the column your hovering on should have the class (.highlighted) you will only see the difference on that cell – Andy Commented Nov 21, 2012 at 16:22
• I understand now how $('tr:last-child td') references the row, but I can't understand how highlighted can be used. $('tr:last-child td highlighted') (or various permutations) do not seem to make a difference. – djq Commented Nov 21, 2012 at 18:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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:

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

It seems every row is on top of his "right neighbor", so they're overlapping each other. You can research deeper why is that, or just fix it with:

$('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');
});

Tell us if you find something better ;)

Table border collapsing

The problem you're facing is that tables by default collapse borders. So you have to set an additional style on table itself:

border-collapse: separate;

This also means that your borders will need to have 1 pixel borders because sibling borders will add to 2 pixels.

Additional styling can then make it possible to remove inner ones and just highlight outers.

Try this: http://jsfiddle/sCFjj/27/

I added a highlighted_left, and simplified the javascript a bit (removing the highlight class for all cells)

$('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');
});​

Where highlighted_left is:

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

本文标签： javascriptHow can a html table highlight columns by changing the border on hoverStack Overflow