Como modificar cor de fundo da linha do DataTable em JSF usando javascript

Front-end
#1

olá pessoal
estou com uma dúvida de como modificar a cor de fundo da linha atual de uma tag JSF h:datatable utilizando uma função javascript quando o mouse passa pela linha do datatable ?

#2

Eu tenho esse esquema aqui ve se da certo pra ti:

função js: 

function highlight() {
    var previousClass = null;
    // simple script for highlighting rows
    var itable = 0;
    var table = document.getElementsByTagName("table")[itable];
    while (table) {
    if (table.className && table.className=='dataTable') {
        var tbody = table.getElementsByTagName("tbody")[0];
        var rows = tbody.getElementsByTagName("tr");
        for (i=0; i < rows.length; i++) {
            rows[i].onmouseover = function() { previousClass=this.className;this.className='dataTableHighlight' };
            rows[i].onmouseout = function() { this.className=previousClass };
	}
     }
        itable++;
        table = document.getElementsByTagName("table")[itable];
    }
}

arquivo.css

.dataTable {
	background-color: black;
	border: 1px solid #000066;
	font-size :	9pt;
	margin:	5px;
	width:90%;
}

.dataTable th {
	border-right: 1px solid #c8c8ff;
	padding-left: 2px;
	padding-right:12px;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	color: white;
	background-color: #000066;
	margin-right: 10px;
	white-space: nowrap;
}

.dataTable  td {
	font-family: verdana, arial, helvetica, sans-serif;
	padding-left: 2px;
}

.dataTable td.hidden {
	display: none;
}

.dataTable th.hidden {
	display: none;
}

.dataTable th.r {
	text-align: right;
	padding-right: 10px;
}

.dataTable th.c {
	text-align: center;
}

.dataTable td.r {
	text-align: right;
	padding-right: 10px;
}

.dataTable td.c {
	text-align: center;
}

.dataTable  tr.odd {
	background-color: whitesmoke;
}

.dataTable tr.even {
	background-color: #d6cfe6;
}

.dataTable th a   ,.dataTable th a:visited {
	text-align: left;
	color: white;
}

.dataTable th a:hover {
	color: #ffcc00;
	background-color: transparent;
}

.dataTable .order1 {
	background-position: right;
	background-image: url('img/arrow_up.gif');
	background-repeat: no-repeat;
}

.dataTable .order2 {
	background-position: right;
	background-image: url('img/arrow_down.gif');
	background-repeat: no-repeat;
}

tr.dataTableHighlight {
	background-image: url('img/selected.gif');
	background-repeat: repeat-x;
	background-color: #ffff99;
}

Nesse caso quando passa o mouse em cima a cor fica amarela.

Falou.

#3

obrigado
Funcionou legal esse esquema. Antes eu estava tentando pegar somente pelo comando JavaScript:

var datatable = document.getElementById(“id_do_form:id_datatable”);
var tr = datatable.getElementsByTagName(‘tr’);

e não estava funcionando de jeito nenhum. Mas com o seu esquema funcionou direitinho.
Realmente JSF não combina muito com JavaScript, espero que no JSF 2.0 os caras da Sun parem com essa palhaçada e disponibilizem componentes com mais interoperabilidade entre Ajax e JSF para validações no lado do cliente.
Enquanto isso não acontece o jeito é usar JavaScript mesmo.
Você já utilizou a biblioteca o RichFaces / Ajax4JSF ?

Muito obrigado amigo.

#4