Highlight Row (with Column Sorting Enabled)

elite-rob

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!

allan

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

ashffaq

Thanks Allan, It worked for me as well. love you

danh

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]