Filas de columna de colores

DiegoAH · #1 (**permalink**) 11/11/2010, 05:40

Buenos dias a todos este es mi primer tema, haber si me podeis echar una manilla:

Mirar estoy haciendo una web con un sistema de busqueda generado en php, el usuario busca un nombre y mediande un live search casero lo encuentra y lo muestra (si esto es de css ya vereis). La cuestio es que lo que devuelve el php son 4 campos pero almacenados en uno solo. A la hora de mostrarlos por pantalla utilizo un javascript con una clase y lo almaceno en una tabla. Lo que quiero es que las filas impares esten de un color y las pares de otro, se como hacerlo si no fuese por ke toda la tabla es el mismo campo. Cre que si dejo el codigo se entendera mejor 1º el php

Código PHP:

  <?php 
mysql_connect("localhost", "root", "") or die(mysql_error()); 
mysql_select_db("busqueda") or die(mysql_error()); 
 
$partialdatos = $_POST['partialdato']; 
 
$datos= mysql_query("SELECT * from datos where todo LIKE '%$partialdatos%'");   
 
          
                
     while($dato= mysql_fetch_array($datos)){ 
          
         echo '<tr><td>'.$dato['nombre_apellido'].'</td>'; 
         echo '<td>'.$dato['email'].'</td>'; 
         echo '<td>'.$dato['departamento'].'</td>'; 
         echo '<td>'.$dato['extension'].'</td></tr>'; 
        } 
?>

Ahora el Html

Código HTML:

<html>
	<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript">
			function getdatos(value){
				$.post("getdatos.php", {partialdato:value}, function(data){
					$("#results").html(data);
			});
			}
		</script>
   
       <style type:="text/css">
	body {
	font-style:italic;
	margin: 0 auto;
	font-family: arial;
	text-align:center;
	background-color: #F0F0F0;
	vertical-align:center;
	background-image:url(fondo-cabecera.png);
	background-repeat:repeat-x;
		}
	table.fija{table-layout: fixed}
		
	#cabecera{
	background-color:#000;
	background-repeat:repeat;
	margin-top:40px;
	margin-bottom:60px
	
	
			}
			#introducir{
				margin-top:60px;
				margin-bottom:20px;
				width:960px;
				border:solid 9px #626262;
			
			}
	
	#tabla1{
	font-weight: bold;
	color: #F0F0F0;
	height:auto;
	width:auto;
	overflow: hidden;
	class="fija";
	font-family: Arial;
	font-size: 20px;
	font-style: normal;
	line-height: normal;
	text-transform: capitalize;

		}
		h3{
			font:arial;
			font-weight:bold;
			color: #000000;
		}
		#parte2{
	background-color: #F0F0F0;
	color:#000000;
		}
	
		
		#tabla1 .fija {
	color: #FF0000;
}
#busqueda{
	color:#CCCCCC;
	text-align: left;
	font-family: georgia;
	font-size:14px;
	font-style:italic;
	margin-bottom:30px;
	
}


#busqueda2{
	font-family:Georgia;
	font-style:italic;
	font-size: 56px;
	color: #CCC;
	background-color: #F0F0F0;	
	}
	
	#general{
			width:960px;
			margin: 0 auto;
				}

     #columanas_principales {
		 
		 font-family: Arial; 
		 font-weight:bold;
		 font-size:14px;
		 color: #000;
		 
		 }
		 
	  p {
		  
		  font-family: Arial; 
		  font-size: 12px;
		  font-weight:normal;
		  
		  }
	 
	 .lupa{
		background: white url(lupa.png) no-repeat 885px center;
	 }
	 
	 #barra{
	background-repeat:repeat;
	background-image: url(BARRA-INFERIOR.jpg);
	 }
	 
	#results{
		font-family:arial;
		font-size:12px;
		color:#000;
		line-height:120%;
		margin-top:-40px;
		margin-bottom:10px;
		}
	 
	    </style>
        
     
       
</head>
    
    
<body>
<div id="general">
<div id="cabecera">
  <div id="logoied" align="right"><img src="logo-izq.png" width="127" height="25" alt="buscar" align="left" />
    <img src="logo-ied2.png" width="70" height="32" alt="buscar" />
    
  </div>
<div id="introducir">
    <input name="campo" type="text" class="lupa" id="busqueda2" onKeyUp="getdatos(this.value)" value="B&uacute;scame..." size="32"  alt="busca por nombre o email" >
</div>
<div id="busqueda">
<img src="ojo2.png" width="25" height="17" alt="buscar" />
por mi nombre, mail, o departamento</br></div></br>
<div class="fija" id="tabla1">
 
<table width="1066" height="26" class="fija" >
    <tr align="left">
<td width="306" height="20">Nombre</td>
<td width="308">Mail</td>
<td width="294" >Departamento</td>
<td width="138" align="left">Ext.</td>
</tr>
    
  </table>
</div>

</div>

 
<table id="results"width="1250" height="25" class="fija"  >

<td width="1091"></tr>
    
  </table>

    <div id="barra">
    <img src="BARRA-INFERIOR.jpg" width="1" height="2" alt="buscar" />
    </div>
    <p align="right"><img src="logoizqabajo.png" width="95" height="15" alt="buscar" align="left"/><img src="logodrchabajo.png" width="61" height="28" alt="buscar" /></p>
  <img src="derechos.png" width="191" height="9" alt="buscar" align="left" style="margin-top:-20px"/>
</div>
</div>
	
</body>
</html>

Quizas con un contador en el php y un if en html? funcionaria eso de ser asi como seria que es lo que estoy intentando pero no lo consigo.

Cualquier ayuda seria de gran ayuda y preguntarme si no lo entendeis bien la explicacion al ser la primera vez ya se sabe. Gracias de antemano

_Demon · #2 (**permalink**) 11/11/2010, 07:11

Hola DiegoAH.

Intentaré ayudarte de la mejor forma posible e intentando entender lo que quieres hacer, te pongo el código como yo lo haría.

en la parte de css pondria dos clases

Código CSS:

Ver original.par{
     background-color:#000;
}
 
.impar{
     background-color:#999;
}

y en php en la parte que escribiste lo modificaria de la siguiente manera:

Código PHP:

  $impar = true; 
    while($dato= mysql_fetch_array($datos)){  
           
        if ($impar) 
        { 
     
                echo '<tr class="impar"><td>'.$dato['nombre_apellido'].'</td>';  
                echo '<td>'.$dato['email'].'</td>';  
                echo '<td>'.$dato['departamento'].'</td>';  
                echo '<td>'.$dato['extension'].'</td></tr>';  
                $impar = false; 
        } 
        else 
        { 
            echo '<tr class="par"><td>'.$dato['nombre_apellido'].'</td>';  
                echo '<td>'.$dato['email'].'</td>';  
                echo '<td>'.$dato['departamento'].'</td>';  
                echo '<td>'.$dato['extension'].'</td></tr>';  
                $impar = true; 
        } 
 
    }

Espero que te sirva.

Un saludo

DiegoAH · #3 (**permalink**) 12/11/2010, 02:51

A no, no me explique bien por lo que parece, no es esa tabla es la otra mira esta:

Código HTML:

Ver original<table id="results"width="1250" height="25" class="fija"  >
 
<td width="1091"></tr>
    
  </table>

DiegoAH · #4 (**permalink**) 12/11/2010, 04:14

aun que el codigo php me viene de maravilla gracias!!

_Demon · #5 (**permalink**) 12/11/2010, 08:48

Hola. Bueno aun y todo, realmente es lo mismo pero para otra tabla,

creas dos clases en css con la propiedad background-color, las puedes llamar como quieras, yo te puse "par" - "impar".

Y luego una condicion que te imprima alternativamente aplicando cada estilo, como te puse;

Código PHP:

  condicion = true 
 
if (condicion) 
     <tr Class="par"></tr> // aplicas el estilo css con el color par 
     condicion = false // para que vaya al impar 
else 
     <tr Class="impar"></tr> // aplicas el estilo css con el color impar 
     condicion = true // para que vaya al par

Esta seria una solución, pero tu problema se puede resolver de muchas maneras y seguro que hay soluciones mejores que la mía, pero es lo que se me ocurrió. En este mundo cada uno tiene su forma de resolver. Espero que te haya servido de algo.

Un saludo

DiegoAH · #6 (**permalink**) 15/11/2010, 04:43

MIL GRACIAS al final lo probe como dijiste al principio y era eso!!!! jaja culpa mia

Muchisimas gracias de nuevo!!