How to block onrowmouseout when a row is clicked?

Question

I am doing the following: when mouse is over a row of a table, row is highlighted and when mouse is out then row becomes white again. But if row is clicked, then the clicked row should keep its color(which is blue in my case). Here is my code:

<rich:extendedDataTable onrowclick="this.style.backgroundColor='#BAFFFE'" onrowmouseover ="this.style.backgroundColor='#BAFFFE'"
                            onrowmouseout="this.style.backgroundColor='white'"

The problem is, after clicking a row, if we move the mouse, since mouse is out the row becomes white again. Can anyone help me with it?

Thanks

Answer 1

It is easier to do using rich:extendedDataTable css classes, so no javascript is needed:

.rf-edt-b .rf-edt-tbl > tbody > tr {
  background-color: #fff;
}
.rf-edt-b .rf-edt-tbl > tbody > tr:hover {
  background-color: #BAFFFE;
}
.rf-edt-b .rf-edt-tbl > tbody > tr.rf-edt-r-sel {
  background-color: #BAFFFE;
}

rich:extendedDataTable style classes and skin parameters