Foros del Web » Creando para Internet » CSS »

Filas de columna de colores

Estas en el tema de Filas de columna de colores en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/11/2010, 05:40
Avatar de DiegoAH  
Fecha de Ingreso: noviembre-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 1 mes
Puntos: 0
Filas de columna de colores

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'];

$datosmysql_query("SELECT * from datos where todo LIKE '%$partialdatos%'");  

         
               
     while(
$datomysql_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

Última edición por DiegoAH; 11/11/2010 a las 05:51 Razón: mal el titulo
  #2 (permalink)  
Antiguo 11/11/2010, 07:11
 
Fecha de Ingreso: noviembre-2010
Mensajes: 17
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Filas de columna de colores

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
  1. .par{
  2.      background-color:#000;
  3. }
  4.  
  5. .impar{
  6.      background-color:#999;
  7. }

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


Código PHP:
$impar true;
    while(
$datomysql_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
  #3 (permalink)  
Antiguo 12/11/2010, 02:51
Avatar de DiegoAH  
Fecha de Ingreso: noviembre-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Filas de columna de colores

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

Código HTML:
Ver original
  1. <table id="results"width="1250" height="25" class="fija"  >
  2.  
  3. <td width="1091"></tr>
  4.    
  5.   </table>
  #4 (permalink)  
Antiguo 12/11/2010, 04:14
Avatar de DiegoAH  
Fecha de Ingreso: noviembre-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Filas de columna de colores

aun que el codigo php me viene de maravilla gracias!!
  #5 (permalink)  
Antiguo 12/11/2010, 08:48
 
Fecha de Ingreso: noviembre-2010
Mensajes: 17
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Filas de columna de colores

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
  #6 (permalink)  
Antiguo 15/11/2010, 04:43
Avatar de DiegoAH  
Fecha de Ingreso: noviembre-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Filas de columna de colores

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

Etiquetas: colores, columna, filas
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




La zona horaria es GMT -6. Ahora son las 12:11.