Highlight Row (with Column Sorting Enabled)

Highlight Row (with Column Sorting Enabled)

edited May 2010 in General Posts: 26
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:
tr.even:hover { background-color: #ffff99; } tr.odd:hover { background-color: #ffff99; }
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:
tr.odd td.sorting_1:hover { background-color: #ffff99; } tr.even td.sorting_1:hover { background-color: #ffff99; }
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

  • Posts: 22,689
    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:

    #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; }
    Regards,
    Allan
  • Thanks Allan, It worked for me as well. love you
  • edited July 2012 Posts: 3
    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.

    #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; }
This discussion has been closed.