Foros del Web » Programando para Internet » Javascript »

Cambiar color de fila al pasar el mouse

 Estas en el tema de Cambiar color de fila al pasar el mouse en el foro de Javascript en Foros del Web. Hola foreros de javascript, espero que puedan darme una ayuda, porque con php no se como hacerlo y creo que no se puede. El tema ...
  #1 (permalink)  
Antiguo 26/04/2007, 05:52
Avatar de cala932  
Fecha de Ingreso: septiembre-2006
Ubicación: San Juan-Argentina
Mensajes: 902
Antigüedad: 17 años, 7 meses
Puntos: 9
Cambiar color de fila al pasar el mouse
Hola foreros de javascript, espero que puedan darme una ayuda, porque con php no se como hacerlo y creo que no se puede. El tema es el siguiente: Tengo una tabla en la cual muestro una serie de resultados devueltos por una consulta. Lo que quiesiera hacer es que cuando el usuario cada vez que pase el puntero del mouse por encima de alguna fila, esta cambie de color, y cuando lo saque vuelva al color que tenia, asi para todas las filas. Ya que hay veces en las que la consulta devuelve varias filas y uno puede confundirse, esto permite que con el color sea mas facil saber cual fila es la que esta mirando; si pueden facilitarme algun script que pueda implementar directamente o modificarlo para lo que quiero, mucho mejor. Desde ya muchisimas Gracias. Saludos
__________________
->Aprender es un proceso que incluye el error..
  #2 (permalink)  
Antiguo 26/04/2007, 06:10
Avatar de JavierB
Colaborador
  
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Re: Cambiar color de fila al pasar el mouse
Hola cala932

Echa un vistazo a este código para iluminar filas

Saludos,
  #3 (permalink)  
Antiguo 26/04/2007, 06:44
Avatar de cala932  
Fecha de Ingreso: septiembre-2006
Ubicación: San Juan-Argentina
Mensajes: 902
Antigüedad: 17 años, 7 meses
Puntos: 9
Re: Cambiar color de fila al pasar el mouse
Sin palabras, mil gracias javierB, esta buenisimo el script , le saque un par de condiciones porque queria que por defecto quedara para iluminar las filas, es decir que el usuario no tenga que tildar los checkbox, y particularmente me interesaba iluminar la fila. Te pongo como lo deje para que me digas si habria que sacarle algo mas, ya lo probe y funciona de primera.
Código: 
<style type="text/css">
table {border-collapse:collapse;border:1px solid maroon;margin-left:80px}
td {border:1px solid maroon;width:30px;text-align:center}
</style>
<script type="text/javascript">
<!--
function ini() {
  tab=document.getElementById('tabla');
  for (i=0; ele=tab.getElementsByTagName('td')[i]; i++) {
    ele.onmouseover = function() {iluminar(this,true)}
    ele.onmouseout = function() {iluminar(this,false)} 
  }
}

function iluminar(obj,valor) {
  fila = obj.parentNode;

    for (i=0; ele = fila.getElementsByTagName('td')[i]; i++)
      ele.style.background = (valor) ? '#B9F8F8' : '';
}
-->
</script>
</head>
<body onload="ini()">
<p>
</p>
<table id="tabla" border="1">
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr>
<tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
</tr>
</table>
</body>
Muy bueno el script. Gracias. Saludos
__________________
->Aprender es un proceso que incluye el error..
  #4 (permalink)  
Antiguo 26/04/2007, 09:51
Avatar de ikaroraul  
Fecha de Ingreso: octubre-2006
Ubicación: La Paz
Mensajes: 391
Antigüedad: 17 años, 7 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!!!!!
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


« Tema Anterior | Próximo Tema »


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