6

Minha tabela é criada com um loop em PHP. Faço isso por PHP mesmo adicionando uma condição ou tem alguma forma melhor?

if ($nomSenha == 'xxxxxxxx') {
echo '<table class="pesquisaClientes">';    
echo '<tr>';
echo '<td class="id">Id</td>
      <td class="nome">Nome</td>
      <td class="endereco">Endereço</td>
      <td class="bairro">Bairro</td>
      <td class="numero">Número</td>
      <td class="complemento">Complemento</td>
      <td class="telefone">Telefone</td>
      <td class="email">Email</td>
      <td class="data">Data</td>
      <td class="editar">Editar</td>';
echo '</tr>';
$i = 0;
while ($clientes = mysql_fetch_array($selecionarClientes, MYSQL_NUM)) {
     $i += 1;
     echo '<tr id="cliente'.$i.'">';
     echo '<td class="id">'.iconv('ISO-8859-1','UTF-8',$i).'</td>
           <td class="nome">'.iconv('ISO-8859-1','UTF-8',$clientes[2]).'</td>
           <td class="endereco">'.iconv('ISO-8859-1','UTF-8',$clientes[1]).'</td>
           <td class="bairro">'.iconv('ISO-8859-1','UTF-8',$clientes[3]).'</td>
           <td class="numero">'.iconv('ISO-8859-1','UTF-8',$clientes[4]).'</td>
           <td class="complemento">'.iconv('ISO-8859-1','UTF-8',$clientes[5]).'</td>
           <td class="telefone">'.iconv('ISO-8859-1','UTF-8',$clientes[6]).'</td>
           <td class="email">'.iconv('ISO-8859-1','UTF-8',$clientes[7]).'</td>
           <td class="data">'.iconv('ISO-8859-1','UTF-8',$clientes[8]).'</td>
           <td class="editar"> Editar </td>';
     echo '</tr>';
 }

6 Respostas 6

16

A solução pode ser simplesmente com CSS usando:

tr:nth-child(even) td {
    border-bottom: 3px solid red;
}
tr:nth-child(odd) td {
    border-bottom: 3px solid green;
}

Exemplo

OBS: São propriedades do CSS3 e não funcionam em navegadores mais antigos.

4
  • Antes de testar, isso é css3? preciso que suporte navegadores antigos.
    – Joao Paulo
    12/12/2013 às 11:52
  • 1
    Do IE9 pra cima esse CSS é suportado. Dá uma olhada: caniuse.com/#feat=css-sel3
    – andremw
    12/12/2013 às 11:54
  • 4
    @JoaoPaulo Você pode adicionar suporte a CSS3 no IE8 com o Selectvizer. Caso funcione pro seu caso, é legal usar o :nth-child por ser padrão web. =)
    – elias
    12/12/2013 às 12:02
  • Obrigado a todas as respostas. Mas o importante é que os usuários possam ver da melhor forma sem se preocupar com versão! Entao vou utilizar a principio a condição do php mesmo.
    – Joao Paulo
    12/12/2013 às 12:05
11

Coloque um "if" ternário no código pra saber se o seu contador $i é impar, ou par, dependendo do que for ele imprime uma classe css que você determina que terá um fundo diferente:

echo $i % 2 === 0 ? 'sua_classe_cor_diferente' : '';  

Tratar somente no CSS também é eficaz, porém não funciona em todos os navegadores infelizmente...

0
7

Encontrei uma forma de fazer com jQuery que pra mim seria mais adequado ate que por PHP:

$( "tr:even" ).css( "background-color", "#bbf" );
$( "tr:odd" ).css( "background-color", "#fff" );
4
  • 1
    Realmente existem várias opções, mais particularmente, acredito que quanto menos JS em sua aplicação melhor, ele é ideal em muitas situações, mais sobrecarrega de mais a página, não neste caso que é uma operação relativamente simples, de qualquer forma, o processamento neste caso é bem mais rápido sendo feito no PHP, afinal, ele já vai percorrer o seu loop de qualquer forma, apenas com um if a mais, mas, somente que está mexendo na sua aplicação realmente sabe o que é melhor pra ela...abç! 12/12/2013 às 17:07
  • 1
    Digo mais adequado pela facilidade de manutencao. Pois se eu tivesse 10 tabelas, teria que encontrar o loop de cada uma e ir la no codigo inserir esse if. Com jquery se eu quiser pode servir pra todas as tabelas que eu criar.
    – Joao Paulo
    12/12/2013 às 17:12
  • Ótimo argumento, realmente o JS é melhor neste caso... 12/12/2013 às 17:14
  • Só um alerta: na tua resposta tens a cor de fundo igual para :even e para :odd, por uma questão de coerência com a pergunta, sugeria que alterasses uma das cores.
    – Zuul
    7/03/2014 às 18:48
5

Você pode usar CSS:

/* linhas ímpares */
table tr:nth-child(odd) td {
  background-color: #fff;
}

/* linhas pares */
table tr:nth-child(even) td {
  background-color: #ccc;
}

No entanto, o usuário deve usar no mínimo as seguintes versões de navegadores:

  • Chrome 1.0
  • Firefox 3.5
  • Internet Explorer 9.0
  • Opera 9.5
  • Safari 3.1

Ou seja, não funciona no IE 8 e mais antigos.

Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

5

Não precisa usar código para fazer isso, seja em PHP ou Javascript, apenas CSS.

Veja este exemplo:

.tabela tr:nth-child(even) {background: #CCC}
.tabela tr:nth-child(odd) {background: #FFF}

Então apenas adicione o class tabela na sua table:

<table id="pesquisaClientes" class="tabela">

Porém, isso não vai funcionar nas versões anteriores ao Internet Explorer 8. Se precisar manter a compatibilidade, use o jQuery. Exemplo:

$(document).ready(function()
{
    $(".tabela tr:even").css("background-color", "#CCC");
    $(".tabela tr:odd").css("background-color", "#FFF");
});
1
  • Achei esta resposta a mais completa. Forneceu a mesma informação que as demais respostas (inclusive a resposta do próprio autor) de forma unificada. 18/12/2013 às 2:14
1

Para navegadores antigos somente via javascript/jquery mesmo, porém se sua tabela muda dinamicamente adicionando ou removendo linhas, você terá que se utilizar de um evento para atualizá-la sempre:

$('.tabela').bind("DOMSubtreeModified",function(){
    $("tr:even").css("background-color", "#bbf");
    $("tr:odd").css("background-color", "#fff");
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .