cambiar el fondo de toda una fila

occiso · #1 (**permalink**) 14/03/2005, 18:05

Vereis, tengo una tabla que tiene 2 filas, y quiero que cuando se le pase el raton por encima se cambie de color el fondo de la tabla. El problema es que cada fila tiene dos columnas que tambien tienen varias filas.

he probado con un document.all y no me ha funcionado

ahi teneis el enlace al tipo de tabla que tengo:

http://webs.ono.com/usr004/jobegor/rowspan.htm

programeitor · #2 (**permalink**) 14/03/2005, 18:53

document.getElementById("fila").style.backgroundCo lor="#009999";

occiso · #3 (**permalink**) 15/03/2005, 16:45

Cita:

Iniciado por programeitor

document.getElementById("fila").style.backgroundCo lor="#009999";

no funciona

programeitor · #4 (**permalink**) 15/03/2005, 16:56

que no funciona?

yo lo he probado en IE y en NS y funciona, eso si ,solo cambian de color los <tr id=fila>

occiso · #5 (**permalink**) 15/03/2005, 17:33

Cita:

Iniciado por programeitor

que no funciona?

yo lo he probado en IE y en NS y funciona, eso si ,solo cambian de color los <tr id=fila>

Pues entonces no se que hago mal. Tu dices que cambia de color <b>los</b> <tr fila y por lo que yo pruebo solo me cambia <b>el</b> <tr fila

Es decir que de los 3 tr con id="fila" que existen solo pilla el primero. Vamos almenos es lo que me hace a mi

vamos puedes mirarlo aqui

http://webs.ono.com/usr004/jobegor/rowspan.htm

me gustaria que las escogiera todas, de manera similar a esto, pero sin la necesidad de meter una tabla dentro de la fila

http://webs.ono.com/usr004/jobegor/Untitled-1.htm

programeitor · #6 (**permalink**) 16/03/2005, 10:13

Bueno la verdad es que yo lo probe con una tabla mas simple, y no pense que eso importara ,pero ahora veo, utilizando tu tabla que no es asi.
El problema creo que esta en que en principio solo se puede asignar un ID a una etiqueta ,para referirte a varias etiquetas tienes que usar el CLASS, es decir en vez de ID usa CLASS.
Estoy probando con document.getElementByClassName('fila').style.backg roundColor='#009999' ,pero no cambia ni una. Voy a averiguar como es el uso correcto de ClassName. Nos vemos.

furoya · #7 (**permalink**) 16/03/2005, 10:50

Hola todos :

occiso : no me queda claro sobre qué fila/s hay que pasar el puntero para que cambie toda la tabla. Al principio creí que era justamente sobre la misma tabla, pero después pareció que era en filas.

Supongo que será sobre la fila que contiene las "filas" múltiples. Que en realidad no son filas; allí podrìas usar rowspan.

Código:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

#miTabla {width:600px; border:6px inset ActiveBorder; background:#009900}
#miTabla td{border:2px solid ActiveBorder; background:transparent}

</style>
<script>
function cambiaFondo(){
if(document.getElementById("miTabla").style.background == "#009999"){
document.getElementById("miTabla").style.background = "#009900"}
else{
document.getElementById("miTabla").style.background = "#009999"}
}

</script>
</head>

<body>
<table id="miTabla">
  <tr onMouseOver="cambiaFondo()" onMouseOut="cambiaFondo()">
    <td width="34">&nbsp;</td>
    <td width="34">&nbsp;</td>
    <td width="107">
		<table width="130" border="1">
      <tr>
        <td>quijote</td>
      </tr>
      <tr>
        <td>aaaaa</td>
      </tr>
      <tr>
        <td>sancho</td>
      </tr>
    </table></td>
    <td width="141">&nbsp;</td>
    <td width="250">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

saludos

furoya

programeitor · #8 (**permalink**) 16/03/2005, 12:07

.

Hola furoya

, lo que quiere el amigo occiso

es que cambie, por decirlo de alguna forma, solo la mitad de la tabla, o para ser mas precisos los <tr class=fila>.

He resuelto el asunto un poco a lo bruto, os muestro:

La funcion se reduce a una:

function f(color){
document.getElementById('fila').style.backgroundColor=color
document.getElementById('fila1').style.backgroundColor=color
document.getElementById('fila2').style.backgroundColor=color
}

En la tabla, lo que he hecho es dar un class distinto a cada <tr> , y he quitado el resto de codigo que tenia occiso porque ya no era nesesario.

<table width="600" border="1">
<tr id="fila" onMouseOver="f('#009999');" onMouseOut="f('#000000');">
<td rowspan="3">a</td>
<td>b</td>
<td>c</td>
<td rowspan="3">d</td>
</tr>
<tr id="fila1" onMouseOver="f('#009999');" onMouseOut="f('#000000');">
<td>e</td>
<td>f</td>
</tr>
<tr id="fila2" onMouseOver="f('#009999');" onMouseOut="f('#000000');">
<td>g</td>
<td>h</td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td rowspan="2"> </td>
</tr >
<tr >
<td> </td>
<td> </td>
</tr>
</table>

con esto tienes pa tirar palante ¿no occiso?

Saludos.

.

occiso · #9 (**permalink**) 16/03/2005, 13:47

Lo primero de todo quiero agraceder que os molesteis a contestar. La ultima respuesta se acercaba (yo la sabia pero no necesitaba eso).

Como lo necesitaba para esta mañana me he tenido que buscar la vida y un compañero de curro me ha dado la solucion.

Al final he creado una tabla y mas tarde dentro de cada columna que tenia varias filas he insertado otra tabla. Asi cuando cambiaba el tr de toda la fila tambien cambiaba el de las tablas anidadas.

En fin, esto no se si podria pertenecer a la FAQ, sin embargo ahi os dejo la pagina por si a alguien le interesa.

http://webs.ono.com/usr004/jobegor/resultado.htm