Foros del Web » Programando para Internet » Javascript »

tr cambia de clase onmouseover

Estas en el tema de tr cambia de clase onmouseover en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/11/2008, 07:30
 
Fecha de Ingreso: noviembre-2008
Mensajes: 14
Antigüedad: 15 años, 5 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
  #2 (permalink)  
Antiguo 07/11/2008, 08:07
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: tr cambia de clase onmouseover

Sólo te falta un punto y coma:
Código PHP:
<!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 0rows.lengthi++) {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> 
  #3 (permalink)  
Antiguo 07/11/2008, 08:14
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: tr cambia de clase onmouseover

No, no, esperá que lo miro mejor.
  #4 (permalink)  
Antiguo 07/11/2008, 08:19
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: tr cambia de clase onmouseover

Ahora sí:
Código PHP:
<!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">
onload=function(){
var 
document.getElementsByTagName('tr');
for (var 
0r.lengthi++) {
r[i].onmouseover = function() {this.className += ' hilite';};
r[i].onmouseout = function() {this.className this.className.replace('hilite''');}}
}
</script>

<style>
.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> 
Faltaba inicializar la asignación con el onload de la página.
  #5 (permalink)  
Antiguo 07/11/2008, 09:28
 
Fecha de Ingreso: noviembre-2008
Mensajes: 14
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: tr cambia de clase onmouseover

Gracias! Panino por tu respuesta...
Ya la probé y funciona muy bien.
http://www.angelinasanchez.com.ar/he...ntitled-8.html

Cuando hago la validación w3c me aparecen 3 errores
Cómo puedo corregirlos?

1/
Line 9, Column 18: character "<" is the first character of a delimiter but occurred as data.
for (var i = 0; i < r.length; i++) {

This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "&lt;"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.

2/
Line 15, Column 6: required attribute "type" not specified
<style>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

este debe ser porque falta... <style type="text/css">... no?

3/
Line 9, Column 19: XML Parsing Error: StartTag: invalid element name.
for (var i = 0; i <r.length; i++) {
  #6 (permalink)  
Antiguo 07/11/2008, 09:34
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: tr cambia de clase onmouseover

Sí, el tag style necesita que le definan el type, aunque lo conveniente sería usar una hoja de estilos externa. Con el javascript, lo mismo, conviene colocarlo en una hoja externa. Creá una página que se llame por ejemplo algo.js, con todo el código javascript que tengas, pero excluyendo los tags script, y en tu html referenciala de esta manera entre los tags <head></head>:
Código PHP:
<script type="text/javascript" src="algo.js"></script> 
  #7 (permalink)  
Antiguo 07/11/2008, 10:04
 
Fecha de Ingreso: noviembre-2008
Mensajes: 14
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: tr cambia de clase onmouseover

Perfecto!!
Muchísimas gracias por tu tiempo.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:43.