Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/11/2008, 07:30
Angelina_Sanchez
 
Fecha de Ingreso: noviembre-2008
Mensajes: 14
Antigüedad: 15 años, 6 meses
Puntos: 0
tr cambia de clase onmouseover

Hola! Hace varios días que estoy intentando resolver este tema.
Necesito hacer una tabla con varias filas y 4 columnas. Al pasar con el mouse sobre cada fila debería cambiar el background de la misma y linkea a una url.

Primero lo planteé como se ve en este link
www.angelinasanchez.com.ar/helpdrivers/5.html
<ul>
<li><a><table>......</table></a></li>
<li><a><table>......</table></a></li>
</ul>
Es un enjendro, no? Bueno eso me dice la validación.... no puede haber un elemento de bloque dentro de un elemento de línea.

Con css es muy sencillo pero no funciona en IE por eso acudo a ustedes.
Quiero resolverlo con javascript pero no logro nada... les paso el script con el que estoy probando.


////////////

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">var rows = document.getElementsByTagName('tr');for (var i = 0; i < rows.length; i++) {rows[i].onmouseover = function() {this.className += ' hilite';}rows[i].onmouseout = function() {this.className = this.className.replace('hilite', '');}}</script>

<style>
.tabla tr:hover, .tabla tr.hilite {
background-color: #DFE7F2;
color: #000000;
}
</style>



</head>
<body>
<table class="tabla">
<tr>
<td><a href="#">celda 1</a></td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>

<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>

</table>
</body>
</html>

////////////

Muchas gracias a quién me pueda dar una mano!
Disculpen si no soy muy clara, es la primera vez que realizo una consulta en el foro, si bien lo leo mucho y me ha sacado de algún apuro.

Angelina