cambio de color de borde de celdas

xias · #1 (**permalink**) 26/09/2006, 08:59

hola:

creo dinamicamente una tabla.

supongamos que la tabla final es de 2 filas por 4 columnas.

lo que quiero es que:
con mouseover sobre la primera fila esta cambie de color y mouseout vuelva al inicial(esto lo se hacer).

lo que no se hacer es que cada una de las columnas de la fila sobre la que está el ratón cambie el color del borde(se colorean los bordes horizontalmente).

no se si me explique bien...

aqui os dejo el codigo que utilizo:

Código PHP:

 
<table border="1" bgcolor="#CCCCCC">

<?php

$a=0;

while ($edad[$a]!=NULL)

{            

?>

<tr bordercolor="#FFFFFF" bgcolor="#FFffff" onMouseOver="this.style.background='#ffFFCC';" onMouseOut="this.style.background='#ffffff';"> 

<?php

    $b=$a+1;

    echo '</div></td><td width=17><div align=center>';

    echo $b;

    echo '</div></td><td width=27><div align=center>';

    echo $sexo[$a];

    echo '</div></td><td width=35><div align=center>';

    echo "Conyuge";

    echo '</div></td><td width=97><div align=center>';

    echo $basesalarial[$a];

    echo '</div></td></tr>';

    $a++;

}

?>

</table>

gracias, un saludo

JavierB · #2 (**permalink**) 26/09/2006, 10:26

Hola xias

Te he preparado un ejemplo, a ver si te sirve:

Código PHP:

  <html>
<head>
<style type="text/css">
td {border:1px solid black}
</style>
<script type="text/javascript">
function marcar(obj,valor) {
  fila = obj.parentNode;
  fila.style.background = (valor) ? 'yellow' : '';
  for (i=0; ele=fila.getElementsByTagName('td')[i]; i++)
    if (ele==obj)
      break;
  for (j=0; ele=fila.parentNode.getElementsByTagName('tr')[j]; j++) 
    ele.getElementsByTagName('td')[i].style.borderColor = (valor) ? 'red' : '';
}
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="marcar(this,true)" onmouseout="marcar(this,false)">aa</td>
<td onmouseover="marcar(this,true)" onmouseout="marcar(this,false)">aa</td>
<td onmouseover="marcar(this,true)" onmouseout="marcar(this,false)">aa</td>
</tr>
<tr>
<td onmouseover="marcar(this,true)" onmouseout="marcar(this,false)">aa</td>
<td onmouseover="marcar(this,true)" onmouseout="marcar(this,false)">aa</td>
<td onmouseover="marcar(this,true)" onmouseout="marcar(this,false)">aa</td>
</tr>
</table>
</body>
</html>

Saludos,

xias · #3 (**permalink**) 27/09/2006, 03:00

hola, gracias..pero creo que me explique mal...lo siento.

Lo que queria es que se coloreara el borde de las celdas que componen esa fila en la que esta el mouseover(cambiar el color de las celdas horizontalmente)...

aprovecho, tengo una duda sobre el codigo que pusite..cuando se utiliza parentnode???

gracias, un saludo

caricatos · #4 (**permalink**) 27/09/2006, 04:00

Hola:

Con el pedazo de script que te preparó JavierB (¡Hola

!), es un delito que no sea lo que quieres (aunque es lo que pedías en el mensaje original)...

Pues entonces te valdría que se coloreara el borde de la fila:

onmouseover="this.parentNode.style.borderColor = "red";

Saludos

xias · #5 (**permalink**) 27/09/2006, 04:18

hola,

se que fue culpa mia, lo siento JavierB...gracias¡¡¡

Lo que quiero es cambiar el color del borde de cada una de las celdas que componen la fila...probe con lo que me pusiste, Caricatos, pero no hace na...

gracias¡¡, un saludo¡¡

caricatos · #6 (**permalink**) 27/09/2006, 04:33

Cita:

Iniciado por xias

hola,

se que fue culpa mia, lo siento JavierB...gracias¡¡¡

Lo que quiero es cambiar el color del borde de cada una de las celdas que componen la fila...probe con lo que me pusiste, Caricatos, pero no hace na...

gracias¡¡, un saludo¡¡

Hola:

Posiblemente la fila no tenga ni tamaño ni estilo...

Con algo así:

onmouseover="this.parentNode.style.border = "2px solid red";

... tendría que hacer algo, pero si lo que quieres es que sea en cada celda, se complica la cosa...

onmouseover"aplica(this, '2px solid red')" onmouseout="aplica(this, '2px solid transparent')"

i aplica:
function aplica(donde, como) {
filas = donde.parentNode.childNodes;
for (var i = 0, total = filas.length; i < total; i ++) filas[i].style.border = como;
}

Saludos

xias · #7 (**permalink**) 27/09/2006, 04:56

ok, perfecto lo que queria era eso(la segunda opcion), muchas gracias¡¡

un saludo