Ayuda a crear un efecto con tablas

robusalma · #1 (**permalink**) 26/01/2008, 18:13

Hola que tal

tengo una tabla al cual le quiero aplicar un efecto muy simple, que al pasar el mouse por encima de una fila me la pinte de un color y al sacar el mouse vuelva a su estado original asi como estan los post de este foro. que cada fila tiene un color de fondo ya denidio y si paso el mouse si pinta de otro color si saco el mouse vuelve al color original.

entonces tengo una tabla de 2 filas y 4 columnas por ejemplo que visualmente tiene un color gris para la primera fila y un color blanco para la segunda fila de "background" y que al posarme por encima se pinten de color rojo por ejemplo.

Hice algo para esto pero si le aplico un estilo Css a la tabla para definir colores iniciales para td th tbody tr etc no funciona bien el efecto.

Como puedo arreglar esto:

----------Codigo-------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

</style>

<script language="javascript">

function mOut(which){ which.style.background='#F8F6F7' }

function mOver2(which){ which.style.background='#FF0000' } //FAFBFE
function mOut2(which){ which.style.background='#F5F7FC' }
</script>

<body>
<table class="tabla_detalle2">
<tbody>
<tr onMouseOver="mOver(this);" onMouseOut="mOut(this);">
<th width="25%">prueba</th>
<th width="25%">1</th>
<th width="25%">prueba</th>
<th width="25%"> </th>
</tr>
<tr class="linea2" onMouseOver="mOver(this);" onMouseOut="mOut(this);">
<td>prueba</td>
<td>1</td>
<td>1</td>
<td> </td>
</tr>
</tbody>
</table>

</body>
</html>

--------------

Ayuda porfa

Gracias

derkenuke · #2 (**permalink**) 27/01/2008, 10:08

Hola robusalma:

Éso ocurre porque los estilos que has definido en la etiqueta <style> tienen prevalencia sobre los que defines con javascript (éstos en concreto, no lo digo con carácter general). Quiero decir: Si defines un estilo para una celda en concreto, ésta tiene más importancia sobre todo lo que escribas de la fila. Así, si cambiamos la fila entera como en tu script, dicha celda quedará impasible, que es lo que te está ocurriendo a ti.

Mira este ejemplo para entenderlo mejor:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
.tabla_detalle2 { background-color: #ccc; } 
#prueba { background-color: green; } 
</style> 
</head> 
 
<body> 
 
 
 
<table class="tabla_detalle2"> 
    <tbody> 
        <tr onmouseover="mOver(this);" onmouseout="mOut(this);"> 
            <th width="25%">prueba</th> 
            <th width="25%" id="prueba">1</th> 
            <th width="25%">prueba</th> 
            <th width="25%">&nbsp;</th> 
        </tr> 
        <tr class="linea2" onmouseover="mOver(this);" onmouseout="mOut(this);"> 
            <td>prueba</td> 
            <td>1</td> 
            <td>1</td> 
            <td>&nbsp;</td> 
        </tr> 
    </tbody> 
</table> 
 
 
<script type="text/javascript"> 
<!-- 
 
function mOut(which){ which.style.backgroundColor='#ccc'; return false; } 
function mOver(which){ which.style.backgroundColor='#8680F9'; return false; } 
 
// --> 
</script> 
 
</body> 
</html>

La celda verde permanecerá siempre verde.

La solución pasa por recorrer con DOM todas celdas hijas, por ejemplo.

Saludos

aloqui · #3 (**permalink**) 27/01/2008, 10:58

Cita:

Iniciado por derkenuke

La solución pasa por recorrer con DOM todas celdas hijas, por ejemplo.

No necesitar recorrer todas las celdas, ni siguiera las filas.
Lo único que necesitas en modificar la clase de la fila en la que esté situado el ratón.
Ejemplo:

Código:

<html>
<head>
<style type="text/css">
.filaItem1 { background-color: white;  }
.filaItem0 { background-color: yellow; }
.filaOver  { background-color: pink;   }
</style>
</head>
<body>
<table>
  <tr class="filaItem0" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem0';">
    <td>Estamos en</td>
  </tr>  
  <tr class="filaItem1" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem1';">
    <td>una</td>
  </tr>
  <tr class="filaItem0" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem0';">
    <td>tabla</td>
  </tr>  
  <tr class="filaItem1" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem1';">
    <td>con</td>
  </tr>
  <tr class="filaItem0" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem0';">
    <td>varias</td>
  </tr>  
  <tr class="filaItem1" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem1';">
    <td>filas</td>
  </tr>
</table>  
</html>

robusalma · #4 (**permalink**) 27/01/2008, 11:08

EXcelente

Mucha Gracias.

derkenuke · #5 (**permalink**) 27/01/2008, 11:10

Hola aloqui:

Pero estamos hablando de este caso:

Código PHP:

  <html> 
<head> 
<style type="text/css"> 
.filaItem1 { background-color: white;  } 
.filaItem0 { background-color: yellow; } 
.filaOver  { background-color: pink;   } 
.celda { background-color: green; } 
</style> 
</head> 
<body> 
<table> 
  <tr class="filaItem0" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem0';"> 
    <td>Estamos en</td> 
  </tr>   
  <tr class="filaItem1" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem1';"> 
    <td class="celda">una</td> 
  </tr> 
  <tr class="filaItem0" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem0';"> 
    <td>tabla</td> 
  </tr>   
  <tr class="filaItem1" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem1';"> 
    <td>con</td> 
  </tr> 
  <tr class="filaItem0" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem0';"> 
    <td>varias</td> 
  </tr>   
  <tr class="filaItem1" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem1';"> 
    <td>filas</td> 
  </tr> 
</table>   
</html>

En el que una celda en concreto tiene un class definido, y al cambiar el class del padre (TR) no cambia el color de la celda.

Aunque si ponemos algo así en el CSS funcionará como esperamos:

Código PHP:

  .filaOver, .filaOver td { background-color: pink; }

No sé si será lo mismo.

Saludos.