filas de diferentes colores

pedroca · #1 (**permalink**) 17/12/2009, 14:24

tengo una duda he visto por ahi otros reportes de algunas paginas y veo que cuando muestran listados veo que sale las filas por decir asi:
fila1
fila2
fila3
fila4

pero no el texto sino el fondo de la celda nose si me deje entender aho como hago o que tendria que hacer para me muestre mis reportes asi

Gracias...

jackson666 · #2 (**permalink**) 17/12/2009, 14:31

Con colores de fondo distintos a eso te referis?

Si traes tus datos de tu base, deberias hacer esto:

Código PHP:

  <?php

#conexion, query bla bla bla

$color;
while($res=mysql_fetch_row($consulta)){

    if($color'%'2==0){
        $color='#ffffff';
    }else{
        $color='#cccccc';
    }

echo "<tr bgcolor='".$color."'>";

#bla bla bla

echo '</tr>';

$color++;
}

?>

Aclaro que el '%' lo puse entre comillas porque hay un problema con el resaltador de codigo del foro =) En realidad va sin

pedroca · #3 (**permalink**) 17/12/2009, 15:10

Cita:

Iniciado por jackson666

Con colores de fondo distintos a eso te referis?

Si traes tus datos de tu base, deberias hacer esto:

Código PHP:

  <?php 
 
#conexion, query bla bla bla 
 
$color; 
while($res=mysql_fetch_row($consulta)){ 
 
    if($color'%'2==0){ 
        $color='#ffffff'; 
    }else{ 
        $color='#cccccc'; 
    } 
 
echo "<tr bgcolor='".$color."'>"; 
 
#bla bla bla 
 
echo '</tr>'; 
 
$color++; 
} 
 
?>

Aclaro que el '%' lo puse entre comillas porque hay un problema con el resaltador de codigo del foro =) En realidad va sin

si exactamente a eso me refiero lo verifico lo que me pasaste y te aviso si funciono y gracias por contestar

gigoz · #4 (**permalink**) 17/12/2009, 15:25

con este javascript te lo hace

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">

body {
	background: #fff;
}

table {
	border-collapse: collapse;
	width: 350px;
	font-size: 1.1em;
}

th {
	background: #3e83c9;
	color: #fff;
	font-weight: bold;
	padding: 2px 11px;
	text-align: left;
	border-right: 1px solid #fff;
	line-height: 1.2;
}

td {
	padding: 2px 1px;
	border-bottom: 1px solid #95bce2;
	vertical-align: top;

}

td * {
	padding: 2px 5px;
}

tr.alt td {
	background: #ecf6fc;
}
tr.over td, tr:hover{
	background: #666666;
	color: #fff;
}

#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 244px;
	top: 49px;
}
.Estilo8 {color: #FFFFFF; font-weight: bold; }
#apDiv2 {
	position:absolute;
	width:397px;
	height:30px;
	z-index:1;
	left: 357px;
	top: 40px;
}
</style>
</head>
<script type="text/javascript">

var Event = {
	add: function(obj,type,fn) {
		if (obj.attachEvent) {
			obj['e'+type+fn] = fn;
			obj[type+fn] = function() { obj['e'+type+fn](window.event); }
			obj.attachEvent('on'+type,obj[type+fn]);
		} else
		obj.addEventListener(type,fn,false);
	},
	remove: function(obj,type,fn) {
		if (obj.detachEvent) {
			obj.detachEvent('on'+type,obj[type+fn]);
			obj[type+fn] = null;
		} else
		obj.removeEventListener(type,fn,false);
	}
}

function $() {
	var elements = new Array();
	for (var i=0;i<arguments.length;i++) {
		var element = arguments[i];
		if (typeof element == 'string') element = document.getElementById(element);
		if (arguments.length == 1) return element;
		elements.push(element);
	}
	return elements;
}

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/,"");
}

function addClassName(el,className) {
	removeClassName(el,className);
	el.className = (el.className + " " + className).trim();
}

function removeClassName(el,className) {
	el.className = el.className.replace(className,"").trim();
}

var ZebraTable = {
	bgcolor: '',
	classname: '',
	stripe: function(el) {
		if (!$(el)) return;
		var rows = $(el).getElementsByTagName('tr');
		for (var i=1,len=rows.length;i<len;i++) {
			if (i % 2 == 0) rows[i].className = 'alt';
			Event.add(rows[i],'mouseover',function() { ZebraTable.mouseover(this); });
			Event.add(rows[i],'mouseout',function() { ZebraTable.mouseout(this); });
		}
	},
	mouseover: function(row) {
		this.bgcolor = row.style.backgroundColor;
		this.classname = row.className;
		addClassName(row,'over');
	},
	mouseout: function(row) {
		removeClassName(row,'over');
		addClassName(row,this.classname);
		row.style.backgroundColor = this.bgcolor;
	}
}

window.onload = function() {
	ZebraTable.stripe('mytable');
}

</script>
</head>

<body>

<table align="center" id="mytable">
<tr>
<td bgcolor="#000000"><div align="center" class="Estilo8">titulo</div></td>
</tr>

 <tr>
 <td><div align="center">a</div></td>
 </tr>
 <tr>
 <td><div align="center">b</div></td>
 </tr>
 
  <tr>
 <td><div align="center">c</div></td>
 </tr>
 <tr>
 <td><div align="center">d</div></td>
 </tr>
  <tr>
 <td><div align="center">e</div></td>
 </tr>
 <tr>
 <td><div align="center">f</div></td>
 </tr>

</table>
</body>
</html>