Colorear fila dinamicamente

seinkraft · #1 (**permalink**) 23/12/2007, 07:10

Holis a todos ando con un problemita, ya tengo el codigo para intercalar el color de las filas pero no puedo insertar de ninguna manera que se coloree de otro color al pasar el mouse por encima :S.

Me pueden ayudar?

Este es el codigo que intercala los colores

Código PHP:

 
<html> 
<head> 
<title>Alternar el color de las filas en paginación</title> 
</head> 
<body bgcolor=#FFFFFF> 
<? 
$dbhost='localhost'; 
$dbusername='root'; 
$dbuserpass='xxxxer'; 
$dbname='xxxxer'; 
 
$con=mysql_connect($dbhost,$dbusername,$dbuserpass); 
mysql_select_db($dbname,$con); 
 
if (!isset($pg)) 
$pg = 0; // $pg es la pagina actual 
$cantidad=12; // cantidad de resultados por página 
$inicial = $pg * $cantidad; 
 
$pegar = "SELECT * FROM users ORDER BY id"; 
$cad = mysql_db_query($dbname,$pegar) or die (mysql_error()); 
 
$contar = "SELECT * FROM users ORDER BY id"; 
$contarok= mysql_db_query($dbname,$contar); 
$total_records = mysql_num_rows($contarok); 
$pages = intval($total_records / $cantidad); 
 
$style="font-family:Arial, Helvetica, sans-serif; font-size:12px;"; 
// Imprimiendo los resultados 
         
echo "<table width='100%' border='0px' cellspacing='1'> 
        <tr> 
        <td bgcolor='".$color."' style='".$style."'>ID</td> 
        <td bgcolor='".$color."' style='".$style."'>Nombre</td> 
        <td bgcolor='".$color."' style='".$style."'>Edad</td> 
        <td bgcolor='".$color."' style='".$style."'>Genero</td> 
        <td bgcolor='".$color."' style='".$style."'>E. Civil</td> 
        <td bgcolor='".$color."' style='".$style."'>Preferencia Sexual</td> 
        <td bgcolor='".$color."' style='".$style."'>Ubicación</td> 
        <td bgcolor='".$color."' style='".$style."'>E-mail</td> 
        <td bgcolor='".$color."' style='".$style."'>Sitio Web</td>"; 
 
while($array = mysql_fetch_array($cad)) { 
 
   if ($colorfila==0){ 
       $color= "#AAD5FF"; 
       $style="font-family:Arial, Helvetica, sans-serif; font-size:12px;"; 
       $colorfila=1; 
    }else{ 
       $color="#6AB5FF"; 
       $style="font-family:Arial, Helvetica, sans-serif; font-size:12px;"; 
       $colorfila=0; 
    } 
 
    echo " 
    <tr> 
    <td bgcolor='".$color."' style='".$style."'>".$array['id']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['username']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['age']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['sex']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['marital']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['preference']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['location']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['email']."</td> 
    <td bgcolor='".$color."' style='".$style."'><a target='_blank' href='".$array['website']."'>".$array['website']."</td> 
    </tr>"; 
 
} 
echo "</table>"; 
 
// Cerramos la conexión a la base 
$con=mysql_close($con); 
 
// Creando los enlaces de paginación 
//echo "<p>"; 
//if ($pg <> 0) 
//{ 
//$url = $pg - 1; 
//echo "<a href='alternarcolores.php?pg=".$url."'>&laquo; Anterior</a>&nbsp;"; 
//} 
//else { 
//echo " "; 
//} 
 
//for ($i = 0; $i<($pages + 1); $i++) { 
//if ($i == $pg) { 
//echo "<font face=Arial size=2 color=ff0000><b>&nbsp;$i&nbsp;</b></font>"; 
//} 
//else { 
//echo "<a href='alternarcolores.php?pg=".$i."'>".$i."</a>&nbsp;"; 
//} 
//} 
 
//if ($pg < $pages) { 
//$url = $pg + 1; 
//echo "<a href='alternarcolores.php?pg=".$url."'>Siguiente &raquo;</a>"; 
//} 
//else { 
//echo " "; 
//} 
//echo "</p>"; 
?> 
</body> 
</html>

y este es el que se tiene que intertar en los td del while

Código HTML:

<td onmouseover='this.style.background="#cc0000"' onmouseout='this.style.background="white"'>

JavierB · #2 (**permalink**) 23/12/2007, 08:11

Hola seinkraft

A ver si te sirve esto:

Código PHP:

  echo "<tr onmouseover=\"this.style.background='#c00'\" onmouseout=\"this.style.background='white'\">"

Saludos,

seinkraft · #3 (**permalink**) 23/12/2007, 08:18

Nop, lamentablemente no anda. Ya lo intente de varias maneras, esta incluida y no logro entender porque no funciona.
Directamente no hace nada porque error no tira.

Sin embargo si lo pongo en td anda...pero la idea es que marque toda la fila completa.

Saludos

Keysher · #4 (**permalink**) 23/12/2007, 08:23

Pero, ¿Cómo lo insertas? en tu código no se ve dónde y cómo se mete, igual está ahí el problema.

JavierB · #5 (**permalink**) 23/12/2007, 08:24

Hola de nuevo.

He probado este sencillo código y me ha funcionado bien. Mira si lo puedes adaptar a tu código:

Código PHP:

 
<table>
<?php
for ($i=0; $i<5; $i++) {
echo "<tr onmouseover=\"this.style.background='#c00'\" onmouseout=\"this.style.background='white'\">";
echo "<td>$i</td></tr>";
}
?> 
</table>

Saludos,

seinkraft · #6 (**permalink**) 23/12/2007, 08:54

Lo eh intentado pero no puedo ya que uso un array para cargar todos los datos de sql e irlos imprimiendo en la tabla. Sin embargo no se porque no anda...si cuando se ve el codigo de fuente desde la parte del cliente el codigo html tendria que funcionar y tampoco lo hace.

Compare el codigo desde la parte cliente, tanto el tuyo como el mio y tiene la misma estructura sin embargo el tuyo funciona ^^u.

Ya estoy desconcertado...

Keysher · #7 (**permalink**) 23/12/2007, 08:59

Sin postear el código no creo que podamos hacer mucho más.

seinkraft · #8 (**permalink**) 23/12/2007, 09:05

Cita:

Iniciado por Keysher

Sin postear el código no creo que podamos hacer mucho más.

El codigo esta posteado al principio de todo...solo tienes que agregarle la parte html a td...y queda asi...

Código PHP:

 
<html> 
<head> 
<title>Alternar el color de las filas en paginación</title> 
</head> 
<body bgcolor=#FFFFFF> 
<? 
$dbhost='localhost'; 
$dbusername='root'; 
$dbuserpass='xxxxer'; 
$dbname='xxxxer'; 
 
$con=mysql_connect($dbhost,$dbusername,$dbuserpass); 
mysql_select_db($dbname,$con); 
 
if (!isset($pg)) 
$pg = 0; // $pg es la pagina actual 
$cantidad=12; // cantidad de resultados por página 
$inicial = $pg * $cantidad; 
 
$pegar = "SELECT * FROM users ORDER BY id"; 
$cad = mysql_db_query($dbname,$pegar) or die (mysql_error()); 
 
$contar = "SELECT * FROM users ORDER BY id"; 
$contarok= mysql_db_query($dbname,$contar); 
$total_records = mysql_num_rows($contarok); 
$pages = intval($total_records / $cantidad); 
 
$style="font-family:Arial, Helvetica, sans-serif; font-size:12px;"; 
// Imprimiendo los resultados 
         
echo "<table width='100%' border='0px' cellspacing='1'> 
        <tr> 
        <td bgcolor='".$color."' style='".$style."'>ID</td> 
        <td bgcolor='".$color."' style='".$style."'>Nombre</td> 
        <td bgcolor='".$color."' style='".$style."'>Edad</td> 
        <td bgcolor='".$color."' style='".$style."'>Genero</td> 
        <td bgcolor='".$color."' style='".$style."'>E. Civil</td> 
        <td bgcolor='".$color."' style='".$style."'>Preferencia Sexual</td> 
        <td bgcolor='".$color."' style='".$style."'>Ubicación</td> 
        <td bgcolor='".$color."' style='".$style."'>E-mail</td> 
        <td bgcolor='".$color."' style='".$style."'>Sitio Web</td>"; 
 
while($array = mysql_fetch_array($cad)) { 
 
   if ($colorfila==0){ 
       $color= "#AAD5FF"; 
       $style="font-family:Arial, Helvetica, sans-serif; font-size:12px;"; 
       $colorfila=1; 
    }else{ 
       $color="#6AB5FF"; 
       $style="font-family:Arial, Helvetica, sans-serif; font-size:12px;"; 
       $colorfila=0; 
    } 
 
    echo " 
    <tr onmouseover=\"this.style.background='#c00'\" onmouseout=\"this.style.background='white'\"> 
    <td bgcolor='".$color."' style='".$style."'>".$array['id']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['username']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['age']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['sex']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['marital']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['preference']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['location']."</td> 
    <td bgcolor='".$color."' style='".$style."'>".$array['email']."</td> 
    <td bgcolor='".$color."' style='".$style."'><a target='_blank' href='".$array['website']."'>".$array['website']."</td> 
    </tr>"; 
 
} 
echo "</table>"; 
 
// Cerramos la conexión a la base 
$con=mysql_close($con); 
 
// Creando los enlaces de paginación 
//echo "<p>"; 
//if ($pg <> 0) 
//{ 
//$url = $pg - 1; 
//echo "<a href='alternarcolores.php?pg=".$url."'>&laquo; Anterior</a>&nbsp;"; 
//} 
//else { 
//echo " "; 
//} 
 
//for ($i = 0; $i<($pages + 1); $i++) { 
//if ($i == $pg) { 
//echo "<font face=Arial size=2 color=ff0000><b>&nbsp;$i&nbsp;</b></font>"; 
//} 
//else { 
//echo "<a href='alternarcolores.php?pg=".$i."'>".$i."</a>&nbsp;"; 
//} 
//} 
 
//if ($pg < $pages) { 
//$url = $pg + 1; 
//echo "<a href='alternarcolores.php?pg=".$url."'>Siguiente &raquo;</a>"; 
//} 
//else { 
//echo " "; 
//} 
//echo "</p>"; 
?> 
</body> 
</html>

No se que otro codigo queres que te muestre :S, explicate.

Keysher · #9 (**permalink**) 23/12/2007, 09:13

Umm, ¿y el código de JavierB te funciona bien?

¿Misma máquina y mismo navegador?

Postea la parte de código HTML resultante, pero no sé, si uno te funciona y el otro no siendo iguales....

Keysher · #10 (**permalink**) 23/12/2007, 09:24

Umm, ya sé por qué no funciona.

Código PHP:

  
<td bgcolor='".$color."' style='".$style."'>ID</td>

Si tienes definido el fondo no hace caso al javascript. No sé si es normal o no, pero si quitas el bgcolor='"$color'" funciona bien.

seinkraft · #11 (**permalink**) 23/12/2007, 09:30

Sip, es por eso :S, que macana.

Porque si habilito que ahora me marque la fila en la que esta el mouse me quita el coloreo de fondo de la tabla :S.

Habria alguna manera de implementar ambas? :S

Gracias a ambos.

Keysher · #12 (**permalink**) 23/12/2007, 09:42

Y si pones el <tr> así:

Código PHP:

  
<tr  bgcolor='".$color."' style='".$style."' onmouseover="this.style.background='#c00'\" onmouseout=\"this.style.background='".$color."'\">

Y luego en los <td> no pones ni color ni estilo?

seinkraft · #13 (**permalink**) 23/12/2007, 09:59

Si, fue perfecto.

Gracias!

Asi quedo:

Código PHP:

 
<html> 
<head> 
<title>Alternar el color de las filas en paginación</title> 
</head> 
<body bgcolor=#FFFFFF> 
<? 
$dbhost='localhost'; 
$dbusername='root'; 
$dbuserpass='sein84244323'; 
$dbname='beast'; 
 
$con=mysql_connect($dbhost,$dbusername,$dbuserpass); 
mysql_select_db($dbname,$con); 
 
if (!isset($pg)) 
$pg = 0; // $pg es la pagina actual 
$cantidad=12; // cantidad de resultados por página 
$inicial = $pg * $cantidad; 
 
$pegar = "SELECT * FROM users ORDER BY id"; 
$cad = mysql_db_query($dbname,$pegar) or die (mysql_error()); 
 
$contar = "SELECT * FROM users ORDER BY id"; 
$contarok= mysql_db_query($dbname,$contar); 
$total_records = mysql_num_rows($contarok); 
$pages = intval($total_records / $cantidad); 
 
$color= "#6AB5FF"; 
$style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;"; 
// Imprimiendo los resultados 
         
echo "<table width='100%' border='0px' cellspacing='1'> 
        <tr> 
        <td bgcolor='".$color."' style='".$style."'>ID</td> 
        <td bgcolor='".$color."' style='".$style."'>Nombre</td> 
        <td bgcolor='".$color."' style='".$style."'>Edad</td> 
        <td bgcolor='".$color."' style='".$style."'>Genero</td> 
        <td bgcolor='".$color."' style='".$style."'>E. Civil</td> 
        <td bgcolor='".$color."' style='".$style."'>Preferencia Sexual</td> 
        <td bgcolor='".$color."' style='".$style."'>Ubicación</td> 
        <td bgcolor='".$color."' style='".$style."'>E-mail</td> 
        <td bgcolor='".$color."' style='".$style."'>Sitio Web</td> 
        </tr>"; 
 
while($array = mysql_fetch_array($cad)) { 
 
   if ($colorfila==0){ 
       $color= "#AAD5FF"; 
       $style="font-family:Arial, Helvetica, sans-serif; font-size:12px;"; 
       $colorfila=1; 
    }else{ 
       $color="#6AB5FF"; 
       $style="font-family:Arial, Helvetica, sans-serif; font-size:12px;"; 
       $colorfila=0; 
    } 
 
    echo "<tr bgcolor='".$color."' style='".$style."' onmouseover=\"this.style.background='#FFFFFF'\" onmouseout=\"this.style.background='".$color."'\">  
    <td>".$array['id']."</td> 
    <td>".$array['username']."</td> 
    <td>".$array['age']."</td> 
    <td>".$array['sex']."</td> 
    <td>".$array['marital']."</td> 
    <td>".$array['preference']."</td> 
    <td>".$array['location']."</td> 
    <td><a style='text-decoration:none' href='mailto:".$array['email']."'>".$array['email']."</td> 
    <td><a style='text-decoration:none' target='_blank' href='".$array['website']."'>".$array['website']."</td> 
    </tr>"; 
 
} 
echo "</table>"; 
 
// Cerramos la conexión a la base 
$con=mysql_close($con); 
 
// Creando los enlaces de paginación 
//echo "<p>"; 
//if ($pg <> 0) 
//{ 
//$url = $pg - 1; 
//echo "<a href='alternarcolores.php?pg=".$url."'>&laquo; Anterior</a>&nbsp;"; 
//} 
//else { 
//echo " "; 
//} 
 
//for ($i = 0; $i<($pages + 1); $i++) { 
//if ($i == $pg) { 
//echo "<font face=Arial size=2 color=ff0000><b>&nbsp;$i&nbsp;</b></font>"; 
//} 
//else { 
//echo "<a href='alternarcolores.php?pg=".$i."'>".$i."</a>&nbsp;"; 
//} 
//} 
 
//if ($pg < $pages) { 
//$url = $pg + 1; 
//echo "<a href='alternarcolores.php?pg=".$url."'>Siguiente &raquo;</a>"; 
//} 
//else { 
//echo " "; 
//} 
//echo "</p>"; 
?> 
</body> 
</html>

pragone · #14 (**permalink**) 23/12/2007, 19:39

De todas formas, me gustaría hacerte una recomendación.... esas cosas mejor manejarlas con CSS... es para eso que existe. Sé que tienes el style pero no es lo mismo. fíjate:

Código HTML:

<html>
<HEAD><TITLE>Prueba</TITLE>
<style>
.filaimpar {background-color:#ddd;}
.filaimpar :hover {background-color:#ccc;}
.filapar { background-color:#fff;}
.filapar :hover {background-color:#eee;}
</style>
</HEAD>
<body>
<table>
<TR class="filaimpar"><TD>Hola</TD></TR>
<tr class="filapar"><TD>Qué tal?</TD></tr>
</table>
</body>
</html>

smilardovich · #15 (**permalink**) 23/12/2007, 22:38

Amigo!,
Mirá
milardovich.com.ar/index.php/files?path=%2FProyectos%2FPHP%2FLibrerias%2Fzebra

Esa es una lib que hice y use para varios proyectos, que hace "zebra tables" que seria lo que querés hacer vos. Sentite libre de usarla, y comentame como te fue, te recomiendo que la uses por que en 3 lineas tenes lo que querés y no "embarras" tanto el code, pero hace como vos quieras.

Milardovich

P.D: Acá tenés un ejemplo:
milardovich.com.ar/projects/zebra/usage.php