How can a html table highlight columns by changing the border on hover?
css, hover, html, html-table, javascript
Solution
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.
Problem
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.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. I've based my attempt closely on this previous question.