Highlight Row (with Column Sorting Enabled)

Highlight Row (with Column Sorting Enabled)

elite-robelite-rob Posts: 26Questions: 0Answers: 0
edited May 2010 in General
Hello All,

I am trying to get “row highlighting” to work and although I can get close to a solution, I can’t seem to get it to work.

I have seen this example, http://www.datatables.net/examples/api/highlight.html, but I only want to highlight rows, not columns.

What I have done so far is add these type style classes:
[code]tr.even:hover {
background-color: #ffff99;
}
tr.odd:hover {
background-color: #ffff99;
}[/code]

At first glance this works great and highlights the row on hover.

The problem is that if I then sort a column, the sorted column TD’s take on a new style class (sorting_1). So, in my 4 column table, when I mouse over a row, only 3 of the columns highlight, which looks silly.

I tried to get crafty (with “tried” being the key word!), and created these style classes:
[code]tr.odd td.sorting_1:hover {
background-color: #ffff99;
}
tr.even td.sorting_1:hover {
background-color: #ffff99;
}[/code]

This sort of gets me closer to a solution, but not exactly. Now, when a column is sorted, if I mouse-over the sorted TD, then the whole row highlights. But, if I put my cursor in one of the other columns, it no longer highlights that sorted TD and I’m back to the whole 3 out of 4 columns in my row highlight issue.

I realize this is because I have the ‘hover’ tag on the TD, which is why it only works if the mouse is over that TD.

I’m sure there is a way to get this to work, but I’m stumped.

Any ideas? Thanks in advance!

Replies

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    I think you are very close with your solution - but rather than having the :hover selector on the td, have it on the tr. Remember CSS is 'cascading' so it would be tr.even:hover td.sorting_1 {} etc. You can get a bit 'cute' and use the sorting column (or even multiple sorting columns) with slightly different colours to highlight that they are being sorted on still. I just tried using the following which did the trick in my examples:

    [code]
    #example tr.even:hover {
    background-color: #ECFFB3;
    }

    #example tr.even:hover td.sorting_1 {
    background-color: #DDFF75;
    }

    #example tr.odd:hover {
    background-color: #E6FF99;
    }

    #example tr.odd:hover td.sorting_1 {
    background-color: #D6FF5C;
    }
    [/code]

    Regards,
    Allan
  • ashffaqashffaq Posts: 1Questions: 0Answers: 0
    Thanks Allan, It worked for me as well. love you
  • danhdanh Posts: 3Questions: 0Answers: 0
    edited July 2012
    I can't get this to work for me. I'm sure I'm missing something obvious (I'm a newbie). I've got your code, Allan, in my CSS file, and I've replaced "#example" with "#myTable" (where "myTable" is the ID of the table element in the DOM).

    I only get highlighting on a cell (not a row), and only after I've specifically clicked to sort that row. Otherwise, nothing.


    If it helps, my table sits in a div that is hidden at first. When a user clicks a button, the div becomes visible, and I use ajax to get all the data to generate the table.

    Thanks for any help you can provide.

    [code]
    #example tr.even:hover {
    background-color: #ECFFB3;
    }

    #example tr.even:hover td.sorting_1 {
    background-color: #DDFF75;
    }

    #example tr.odd:hover {
    background-color: #E6FF99;
    }

    #example tr.odd:hover td.sorting_1 {
    background-color: #D6FF5C;
    }
    [/code]
This discussion has been closed.