[Resolvido] Destacar linha de tabela zebrada

TiagoMaker · Agosto 18, 2010

Dae galera, tenho uma tabela com as linhas zebradas, de dados vindos do BD. Queria colocar um comando para a linha destacar quando passar o mouse. Vou postar abaixo:

Essa é a página que exibe os dados

<?php
//######### INICIO Paginação
        $numreg = 40; // Quantos registros por página vai ser mostrado
        if (!isset($pg)) {
                $pg = $_GET['pg'];
        }
        $inicial = $pg * $numreg;
        
?>
<?php
	include "../includes/conexao.php";
$query = mysql_query("SELECT * FROM atendimento WHERE loja != 'CA' ORDER BY id_atendimento DESC LIMIT $inicial, $numreg");
$nr_linhas = mysql_num_rows($query);
$sql_conta = mysql_query("SELECT * FROM atendimento");
        
        $quantreg = mysql_num_rows($sql_conta); 
$i++;
if ($nr_linhas >= "1"){ // Se tiver um registro ou mais faz a parte de baixo

?>
<?php for($i=0;$i<$nr_linhas;$i++){ $dados = mysql_fetch_assoc($query); 
$style = ($i % 2 == 1) ? 'style="background:#EBEBEB;"' : 'style="background:#CECECE;"' //AQUI É ONDE ATRIBUI AS CORES DA LINHA ZEBRADA
?>
  <?php
		if ($dados[conclusao] == 1)
		{
			$conclusao = '<a href="cadastro.php?id='.$dados[id_atendimento].'">RESOLVIDO</a>';
		}
		else if ($dados[conclusao] == 2)
		{
			$conclusao = '<a href="cadastro.php?id='.$dados[id_atendimento].'"><font color="#F60">EM ATENDIMENTO</font></a>'; 
		}
		else if ($dados[conclusao] == 3)
		{
			$conclusao = '<a href="../filiais/cadastro.php?at='.$dados[id_atendimento].'"><font color="#FF0000">SUBSTITUIR</font></a>'; 
		}
	?>
<table width="1450" align="center" style="border:solid 1px #000; table-layout:fixed; border-bottom: 0px; text-transform:uppercase;" cellpadding="0" cellspacing="0">
<tr <?php echo $style; ?>>
	<?php echo '<td width="80" align="center"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[id_atendimento].'</a></td>' ; ?>
	<?php echo '<td width="100" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[tecnico].'</a></td>' ; ?>
    <?php echo '<td width="80" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[loja].'</a></td>' ; ?>
	<?php echo '<td width="80" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[data].'</a></td>' ; ?>
	<?php echo '<td width="200" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[contato].'</a></td>' ; ?>
    <?php echo '<td width="150" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[equipamento].'</a></td>' ; ?>
	<?php echo '<td width="300" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[problema].'</a></td>' ; ?>
	<?php echo '<td width="300" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[procedimento].'</a></td>' ; ?>
    <?php echo '<td width="80" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$dados[carregamento].'</a></td>' ; ?>
	<?php echo '<td width="160" align="center" style="border-left: solid 1px #000000;"><a href="cadastro.php?id='.$dados[id_atendimento].'">'.$conclusao.'</a></td>' ; } ?>
</tr><tr><td style="border-top: solid 1px #000;" colspan="10"></td></tr>
<?php 
}
else{
echo '<p align="center"><br /><br /><b>NENHUM REGISTRO ENCONTRADO!</b><br /><br /></p>'; // Caso contrario exibi a mensagem
}
?>

</table>
<p align="center"><?php include("paginacao.php");?></p>

franksniper · Agosto 18, 2010

Isso é no css, não no php!

bote na tr um a:hover{background-color:#666}

TiagoMaker · Agosto 18, 2010

Acho que não da pra por isso direto na TR

William Bruno · Agosto 18, 2010

até dá... mas o IE6 não vai suportar..

css:

tr:hover { background: #f0f; }

se tiver 'preocupado' com o ie6, então use javascript

evento onmouseover, e onmouseout

TiagoMaker · Agosto 18, 2010

William, o que você postou não funciona em conjunto com o script que faz a tabela zebra, tentei por #tabela tr:hover { background: #f0f; } no css e colocar a class na tabela e não aparece por cima.

William Bruno · Agosto 18, 2010

?

então você fez errado ^_^ simples assim.

você disse ali em cima: 'class', mas você declarou ID

id = #

class = .

e no teu html, não tô vendo nem ID, e nem CLASS

e outra coisa, se consegui ler certo, você está criando uma tabela nova, a cada volta do loop, oque é desnecessário, poderia fazer tudo numa única table.

se tiver dúvidas, poste a estrutura do banco de dados (exporte a tabela sql), que eu tento fazer um exemplo mais limpo.

TiagoMaker · Agosto 18, 2010

Se souber como fazer em uma única table zebrada e com a linha hover eu gostaria muito de saber como, iria dar uma baita limpada no código pois uso o while para pegar os dados em todas as páginas que exibem dados:

meu banco:

-- phpMyAdmin SQL Dump
-- version 2.11.7
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tempo de Geração: Ago 18, 2010 as 01:53 PM
-- Versão do Servidor: 5.0.51
-- Versão do PHP: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Banco de Dados: `controle`
--

-- --------------------------------------------------------

--
-- Estrutura da tabela `atendimento`
--

CREATE TABLE IF NOT EXISTS `atendimento` (
  `id_atendimento` int(10) unsigned NOT NULL auto_increment,
  `data` varchar(10) default NULL,
  `loja` varchar(3) default NULL,
  `tecnico` varchar(15) default NULL,
  `contato` varchar(50) default NULL,
  `equipamento` varchar(50) default NULL,
  `problema` varchar(50) default NULL,
  `procedimento` varchar(50) default NULL,
  `conclusao` varchar(1) default NULL,
  `carregamento` varchar(10) default NULL,
  `nf` varchar(6) default NULL,
  `cobrado` varchar(10) default NULL,
  `recebido` varchar(80) default NULL,
  PRIMARY KEY  (`id_atendimento`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;


-- --------------------------------------------------------

--
-- Estrutura da tabela `chamados`
--

CREATE TABLE IF NOT EXISTS `chamados` (
  `id_chamados` int(10) unsigned NOT NULL auto_increment,
  `tecnico` varchar(15) default NULL,
  `filial` varchar(3) default NULL,
  `aberturadata` varchar(10) default NULL,
  `aberturahora` varchar(5) default NULL,
  `descricao` varchar(50) default NULL,
  `atendente` varchar(15) default NULL,
  `protocolo` varchar(12) default NULL,
  `previsao` varchar(50) default NULL,
  `fechamentodata` varchar(10) default NULL,
  `fechamentohora` varchar(5) default NULL,
  `conclusao` varchar(1) default NULL,
  PRIMARY KEY  (`id_chamados`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
-- Extraindo dados da tabela `chamados`
--


-- --------------------------------------------------------

--
-- Estrutura da tabela `circuitos`
--

CREATE TABLE IF NOT EXISTS `circuitos` (
  `id_circuitos` int(10) unsigned NOT NULL auto_increment,
  `filial` varchar(3) default NULL,
  `roteador` varchar(16) default NULL,
  `dlci` varchar(7) default NULL,
  `circuito` varchar(7) default NULL,
  `cidade` varchar(50) default NULL,
  `rua` varchar(50) default NULL,
  `fonecrediario` varchar(14) default NULL,
  `fonevendas` varchar(14) default NULL,
  PRIMARY KEY  (`id_circuitos`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=56 ;


-- --------------------------------------------------------

--
-- Estrutura da tabela `tecnica`
--

CREATE TABLE IF NOT EXISTS `tecnica` (
  `id_tecnica` int(10) unsigned NOT NULL auto_increment,
  `datasaida` varchar(10) default NULL,
  `equipamento` varchar(50) default NULL,
  `marca` varchar(50) default NULL,
  `nserie` varchar(15) default NULL,
  `local` varchar(3) default NULL,
  `problema` varchar(100) default NULL,
  `nfsaida` varchar(6) default NULL,
  `assistencia` varchar(50) default NULL,
  `garantia` varchar(3) default NULL,
  `dataretorno` varchar(10) default NULL,
  `nfretorno` varchar(10) default NULL,
  `datafaturamentoservicos` varchar(10) default NULL,
  `nffaturamentoservicos` varchar(10) default NULL,
  `valorservicos` varchar(10) default NULL,
  `datafaturamentopecas` varchar(10) default NULL,
  `nffaturamentopecas` varchar(10) default NULL,
  `valorpecas` varchar(10) default NULL,
  `valortotal` varchar(15) default NULL,
  PRIMARY KEY  (`id_tecnica`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

William Bruno · Agosto 18, 2010

exemplo simples, isolando as zebras, e o ':hover'

<?php

	$con = mysql_connect( 'localhost', 'root', '123' );
	mysql_select_db( 'test', $con );
	

	$sql = "SELECT * FROM atendimento";
	$query = mysql_query( $sql )or die( mysql_error() );
	
	$tr = '';
	$i = 0;
	while( $dados = mysql_fetch_object($query) )
	{
		$class = $i%2==0 ? ' class="dif"' : '';
		$tr .= '<tr'.$class.'>
			<td>'.$dados->id_atendimento.'</td>
			<td>'.$dados->data.'</td>
			<td>'.$dados->loja.'</td>
			<td>'.$dados->tecnico.'</td>
		</tr>';
		$i++;
	}
?>
<style type="text/css">
.dif {
	background: #ccc;
}
.lista tr:hover {
	background: #f0f;
	cursor: pointer;
}
</style>
<table class="lista">
	<thead>
		<tr>
			<th>ID Atendimento</th>
			<th>Data</th>
			<th>Loja</th>
			<th>Técnico</th>
		</tr>
	</thead>
	<tbody>
<?php echo $tr; ?>
	</tbody>
</table>

só você entender o que fiz, e aplicar a paginação, as outras colunas.. enfim.. o resto que você precisa.

TiagoMaker · Agosto 18, 2010

Entendi sim, excelente exemplo, acho que vou utilizar aqui, mas não teria como escolher 2 cores de fundo e mais a cor de destaque?

William Bruno · Agosto 18, 2010

lógico que tem.. mas a melhor maneira, é usar CSS! e não ficar misturando as camadas.. exemplo:

.lista tr {
        background: #ff0; /* cor padrão */
}
.lista tr.dif {
        background: #ccc; /* cor das linhas com zebra */
}
.lista tr:hover {
        background: #f0f; /* cor ao passar o mouse */
        cursor: pointer;
}

viu ? nem toquei no HTML.. e nem no PHP..

se é estilização, então use a camada de estilização: css ! ^_^

TiagoMaker · Agosto 18, 2010

Valeu mesmo William, me sanou várias dúvidas e me ajudou a enxugar bem o código, antes de finalizar só mais 1 duvida que me persegue faz tempo, como fazer a borda da tabela ficar 1px de cor preta, mas que as celulas de dentro tambem apareçam? Porque se eu coloco só o "border:solid 1px #000;" fica só as de fora.

William Bruno · Agosto 18, 2010

uai.. presta atenção no que você mesmo falou:

como fazer a borda da tabela ficar 1px de cor preta, mas que as celulas de dentro tambem apareçam

logo: borda das células, ne?!

.lista td {
        border: 1px solid #000;
}

certamente depois de você tentar isso, vai sugir 'outra dúvida', então veja, sobre:

border-collapse: collapse;

Parece 'besteira'.. mas acho absurdo que tentem aprender PHP, MySQL, AJAX.. sem nem antes estudar CSS e HTML. :lol:

TiagoMaker · Agosto 18, 2010

eheheh obrigado pelas dicas, e desculpe qualquer coisa. Valeu

Arquivado

[Resolvido] Destacar linha de tabela zebrada

Recommended Posts

TiagoMaker 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

franksniper 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

TiagoMaker 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

TiagoMaker 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

TiagoMaker 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

TiagoMaker 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

TiagoMaker 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

TiagoMaker 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante