Tema: Cambiar color de fila al pasar el mouse
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 26/04/2007, 09:51
Avatar de ikaroraul
ikaroraul
 
Fecha de Ingreso: octubre-2006
Ubicación: La Paz
Mensajes: 391
Antigüedad: 18 años, 3 meses
Puntos: 16
Re: Cambiar color de fila al pasar el mouse
HOlas que tal pues te cuento q nosotros estabamos trabajando en algo similar COMO EL PHPMYADMYN
ahi va para alguien simbre servira :P
los nombres de variables a la hora de llamada de la funcion pueden ser reemplazados con variables :P

Código HTML:
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script> 
isIE=document.all?true:false; 
var isNS4=document.layers?true:false;  
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false; 
function coloreaf(_v,num) 
{ 
var res;
res=num%2;
	if(eval("document.nombreform.op"+_v+".checked")==1)
	{
	eval("document.nombreform.op"+_v+".checked=0");
	}
	else
	{
	eval("document.nombreform.op"+_v+".checked=1");
	}
if(res==0)
{
  var bC=new Array('#062F83','white'); 
  var C=new Array('white','black'); 
}
else
{
  var bC=new Array('#062F83','#DFEBFF'); 
  var C=new Array('white','black'); 
}
  var X=eval("document.nombreform.op"+_v+".checked?0:1"); 
  if(isIE) 
  { 
    eval("t"+_v+".style.backgroundColor=bC[X]"); 
    eval("t"+_v+".style.color=C[X]"); 
  } 
  if(isNS6) 
  { 
    document.getElementById("t"+_v).style.backgroundColor=bC[X]; 
    document.getElementById("t"+_v).style.color=C[X]; 
  } 
} 
</script>  

<script> 
isIE=document.all?true:false; 
var isNS4=document.layers?true:false;  
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false; 
function colorea(_v,num) 
{ 
var res;
res=num%2;
	if(eval("document.nombreform.op"+_v+".checked")==1)
	{
	eval("document.nombreform.op"+_v+".checked=0");
	}
	else
	{
	eval("document.nombreform.op"+_v+".checked=1");
	}

if(res==0)
{
  var bC=new Array('#062F83','white'); 
  var C=new Array('white','black'); 
}
else
{
  var bC=new Array('#062F83','#DFEBFF'); 
  var C=new Array('white','black'); 
}
  var X=eval("document.nombreform.op"+_v+".checked?0:1"); 
  if(isIE) 
  { 
    eval("t"+_v+".style.backgroundColor=bC[X]"); 
    eval("t"+_v+".style.color=C[X]"); 
  } 
  if(isNS6) 
  { 
    document.getElementById("t"+_v).style.backgroundColor=bC[X]; 
    document.getElementById("t"+_v).style.color=C[X]; 
  } 
} 
</script> 

<script> 
isIE=document.all?true:false; 
var isNS4=document.layers?true:false;  
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false; 
function coloreamosin(_v,num) 
{ 
	var res;
	res=num%2;
	if(eval("document.nombreform.op"+_v+".checked")==0)
	{
		if(res==0)
		{
			document.getElementById("t"+_v).style.backgroundColor="orange"; 
			document.getElementById("t"+_v).style.color="white"; 
		}
		else
		{
			document.getElementById("t"+_v).style.backgroundColor="orange"; 
			document.getElementById("t"+_v).style.color="white"; 
		}
	}
} 
</script>  

<script> 
isIE=document.all?true:false; 
var isNS4=document.layers?true:false;  
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false; 
function coloreamosout(_v,num) 
{ 
	var res;
	res=num%2;
	if(eval("document.nombreform.op"+_v+".checked")==0)
	{
		if(res==0)
		{
			document.getElementById("t"+_v).style.backgroundColor="#ffffff"; 
			document.getElementById("t"+_v).style.color="black"; 
		}
		else
		{
			document.getElementById("t"+_v).style.backgroundColor="#DFEBFF"; 
			document.getElementById("t"+_v).style.color="black"; 
		
		}
	}
} 
</script>  


</head>
<body topmargin="0" leftmargin="0" class="body" >
<form action="prod_sppb.php" method="post" name="nombreform">
  <center>
    <hr color="#E4E3E3">
  </center>
  <table border="1" align="center" class="tablas">
    <TR bgcolor="#DDDDDD">
      <td align="center" nowrap><b>N</b></td>
      <td align="center" nowrap><b>Densidad</b></td>
      <td align="center" nowrap><b>Dimensiones</b></td>
      <td align="center" NOWRAP><b>Codigo</b></td>
      <td align="center" mowrap><b>Fecha de<br>
        Ingreso</b></td>
      <td align="center" nowrap><b>Hora de<br>
        Ingreso</b></td>
      <td align="center" nowrap><b>Usuario de<br>
        Produccion</b></td>
      <td align="center" nowrap><b>Usuario de<br>
        Inventarios</b></td>
      <td align="center" nowrap><b>Observaciones</b></td>
      <td align="center" nowrap><b>Nuemro de<br>
        Formulario</b></td>
      <td align="center" nowrap><b>Utilizar</b></td>
    </tr>
    <tr bgcolor=#DFEBFF id=t70 onclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
      <td align='center' NOWRAP><b>1</b></td>
      <td align='center' NOWRAP>12</td>
      <td align='center' NOWRAP>190x150x105</td>
      <td align='center' NOWRAP>120407-12-190x150x105-70</td>
      <td align='center' NOWRAP>2007-04-20</td>
      <td align='center' NOWRAP>13:54:16</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>-</td>
      <td align='center' NOWRAP>12</td>
      <td align='center'><input name='op70' type='checkbox' onclick='colorea(70,1)'>
    </tr>
    <tr bgcolor=#FFFFFF id=t71 onclick='coloreaf(71,2)' onMouseOver='coloreamosin(71,2)' onMouseOut='coloreamosout(71,2)'>
      <td align='center' NOWRAP><b>2</b></td>
      <td align='center' NOWRAP>12</td>
      <td align='center' NOWRAP>190x150x105</td>
      <td align='center' NOWRAP>120407-12-190x150x105-71</td>
      <td align='center' NOWRAP>2007-04-20</td>
      <td align='center' NOWRAP>13:54:16</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>-</td>
      <td align='center' NOWRAP>12</td>
      <td align='center'><input name='op71' type='checkbox' onclick='colorea(71,2)'>
    </tr>
    <tr bgcolor=#DFEBFF id=t72 onclick='coloreaf(72,3)' onMouseOver='coloreamosin(72,3)' onMouseOut='coloreamosout(72,3)'>
      <td align='center' NOWRAP><b>3</b></td>
      <td align='center' NOWRAP>12</td>
      <td align='center' NOWRAP>190x150x105</td>
      <td align='center' NOWRAP>120407-12-190x150x105-72</td>
      <td align='center' NOWRAP>2007-04-20</td>
      <td align='center' NOWRAP>13:54:16</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>-</td>
      <td align='center' NOWRAP>12</td>
      <td align='center'><input name='op72' type='checkbox' onclick='colorea(72,3)'>
    </tr>
    <tr bgcolor=#FFFFFF id=t75 onclick='coloreaf(75,4)' onMouseOver='coloreamosin(75,4)' onMouseOut='coloreamosout(75,4)'>
      <td align='center' NOWRAP><b>4</b></td>
      <td align='center' NOWRAP>10</td>
      <td align='center' NOWRAP>190x150x105</td>
      <td align='center' NOWRAP>120407-10-190x150x105-75</td>
      <td align='center' NOWRAP>2007-04-20</td>
      <td align='center' NOWRAP>13:54:16</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>-</td>
      <td align='center' NOWRAP>12</td>
      <td align='center'><input name='op75' type='checkbox' onclick='colorea(75,4)'>
    </tr>
    <tr bgcolor=#DFEBFF id=t79 onclick='coloreaf(79,5)' onMouseOver='coloreamosin(79,5)' onMouseOut='coloreamosout(79,5)'>
      <td align='center' NOWRAP><b>5</b></td>
      <td align='center' NOWRAP>10</td>
      <td align='center' NOWRAP>190x150x105</td>
      <td align='center' NOWRAP>120407-10-190x150x105-79</td>
      <td align='center' NOWRAP>2007-04-20</td>
      <td align='center' NOWRAP>13:54:16</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>-</td>
      <td align='center' NOWRAP>12</td>
      <td align='center'><input name='op79' type='checkbox' onclick='colorea(79,5)'>
    </tr>
    <tr bgcolor=#FFFFFF id=t81 onclick='coloreaf(81,6)' onMouseOver='coloreamosin(81,6)' onMouseOut='coloreamosout(81,6)'>
      <td align='center' NOWRAP><b>6</b></td>
      <td align='center' NOWRAP>10</td>
      <td align='center' NOWRAP>190x150x105</td>
      <td align='center' NOWRAP>120407-10-190x150x105-81</td>
      <td align='center' NOWRAP>2007-04-20</td>
      <td align='center' NOWRAP>13:54:16</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>-</td>
      <td align='center' NOWRAP>12</td>
      <td align='center'><input name='op81' type='checkbox' onclick='colorea(81,6)'>
    </tr>
    <tr bgcolor=#DFEBFF id=t82 onclick='coloreaf(82,7)' onMouseOver='coloreamosin(82,7)' onMouseOut='coloreamosout(82,7)'>
      <td align='center' NOWRAP><b>7</b></td>
      <td align='center' NOWRAP>10</td>
      <td align='center' NOWRAP>190x150x105</td>
      <td align='center' NOWRAP>120407-10-190x150x105-82</td>
      <td align='center' NOWRAP>2007-04-20</td>
      <td align='center' NOWRAP>13:54:16</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>Raulin Calle Vino</td>
      <td align='center' NOWRAP>-</td>
      <td align='center' NOWRAP>12</td>
      <td align='center'><input name='op82' type='checkbox' onclick='colorea(82,7)'>
    </tr>
  </table>
</form>
</body>
</html>
Agradecimientos a SKATOMUNDO quien fue el q nos dio el codigo original :P
Modificaciones:
- Se pinda una fila la pasar el mouse
- Vuelve a su color original al slir del foco
- se pinta de otro color al marcar ckeck o hacer click en cualquier parte de la fila
- vuelve a su color original al estar desmarcado o hacer click

Espero Sugerencias :P

SALUDOS!!!!!