Highlighting Entire Row on Hover with Fixed Columns

Highlighting Entire Row on Hover with Fixed Columns

tcbeatontcbeaton Posts: 16Questions: 0Answers: 0
edited January 2013 in DataTables 1.9
I have a table with fixed columns, I've set up CSS styles to highlight the rows on hover, but only the fixed columns highlight when I hover over them or the non-fixed columns when I hover over them.

Is it possible to have the entire row (fixed and non-fixed columns) highlight when I hover on any cell in the row?

Thanks.

Here's the CSS I'm using to highlight the rows (only "even" included for example):
[code]
tr.even:hover td,
#mtTable tr.even:hover td,
#mtTable tr.even:hover td.sorting_1 { background-color: #FFFF88;
border-top: 2px solid #FF0000;
border-bottom: 2px solid #FF0000; }
[/code]

The first line, "tr.even:hover td", provides the highlighting for the fixed columns, the other two, beginning with "#mtTable", provide the highlighting for the non-fixed columns.

Replies

  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Currently it is not possible with pure CSS since the table gets broken into two parts - of :hover only deals with one. You'd need to use Javascript to do it. I'll try to write a demo sometimes, but if anyone else wants to have a bash, please do and post your code :-)

    Allan
  • PummraPummra Posts: 20Questions: 0Answers: 0
    edited March 2013
    [code]
    $(document).on({
    mouseenter: function () {
    trIndex = $(this).index()+1;
    $("table.dataTable").each(function(index) {
    $(this).find("tr:eq("+trIndex+")").addClass("hover")
    });
    },
    mouseleave: function () {
    trIndex = $(this).index()+1;
    $("table.dataTable").each(function(index) {
    $(this).find("tr:eq("+trIndex+")").removeClass("hover")
    });
    }
    }, ".dataTables_wrapper tr");
    [/code]

    I had a bash at writing some code to do this. I am not sure if it is the most efficient way of doing it, all I know is that it works for me. Hope it helps.

    To use it you just need to include a hover class in your CSS to do define how you want the tr to display.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Excellent - that looks great. Thanks for posting this.

    Allan
  • tcbeatontcbeaton Posts: 16Questions: 0Answers: 0
    edited February 2019
    Pummra,

    This worked perfectly... I just added an extra level to apply the class to the tag, since I was using cell specific styling (i.e., borders):

    [code]
    $(document).on({
    mouseenter: function () {
    trIndex = $(this).index()+1;
    $("table.dataTable").each(function(index) {
    $(this).find("tr:eq("+trIndex+")").each(function(index) {
    $(this).find("td").addClass("hover");
    });
    });
    },
    mouseleave: function () {
    trIndex = $(this).index()+1;
    $("table.dataTable").each(function(index) {
    $(this).find("tr:eq("+trIndex+")").each(function(index) {
    $(this).find("td").removeClass("hover");
    });
    });
    }
    }, ".dataTables_wrapper tr");
    [/code]
  • asdrenasdren Posts: 20Questions: 0Answers: 0
    How can I apply this on my boostrap table where I currently use the table-hover class?
    http://getbootstrap.com/2.3.2/base-css.html#tables

    With my current table-hover class the highlight is split in two, the first highlight is on the columns that are on iLeftColumns and then the second highlight is on the other columns.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    You can't use the `:hover` pseudo class that Bootstrap uses - you have to explicitly add a new class `td.hover` (for example) to your CSS for the code suggested above to work.

    Allan
  • marianopeckmarianopeck Posts: 53Questions: 8Answers: 0
    Thanks guys for this thread. It worked for me. Maybe it would be nice to add this example in the FixedColumns page?
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Thanks for the suggestion - I'll certainly look at doing that! I need a better way of tying the fixed columns with the main table altogether!

    Allan
This discussion has been closed.