How to change the background of rows in a table alternately? Supported by browsers

Navigation
5

My table is created with a loop in PHP. Do I do this by PHP even adding a condition or has it any better? 

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>';
 }
    
asked by anonymous 12.12.2013 / 12:41

6 answers

15

The solution can be simply with CSS using: 

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

Example

NOTE: CSS3 properties do not work in older browsers.

    
12.12.2013 / 12:48
10

Put a ternary "if" in the code to know if your $ i counter is odd, or even, depending on what it prints, a css class that you determine will have a different background: 

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

Treating only in CSS is also effective, however it does not work in all browsers unfortunately ...

    
12.12.2013 / 12:50
6

I found a way to do with jQuery that for me would be more suitable until by PHP: 

$( "tr:even" ).css( "background-color", "#bbf" );
$( "tr:odd" ).css( "background-color", "#fff" );
    
12.12.2013 / 13:43
4

You can use CSS: 

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

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

However, you should use at least the following browser versions:

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

That is, it does not work in IE 8 and older.

Source: link

    
12.12.2013 / 12:47
4

You do not need to use code to do this, either in PHP or Javascript, just CSS.

See this example: 

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

Then just add the class tabela to your table: 

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

However, this will not work in versions prior to Internet Explorer 8. If you need to maintain compatibility, use jQuery. Example: 

$(document).ready(function()
{
    $(".tabela tr:even").css("background-color", "#CCC");
    $(".tabela tr:odd").css("background-color", "#FFF");
});
    
12.12.2013 / 12:50
1

For older browsers only via javascript / jquery, but if your table changes dynamically by adding or removing rows, you will have to use an event to always update it: 

$('.tabela').bind("DOMSubtreeModified",function(){
    $("tr:even").css("background-color", "#bbf");
    $("tr:odd").css("background-color", "#fff");
});
    
31.07.2015 / 15:51
Limit size of VARCHAR2 field in Oracle Why are some "git" commands preceded by a dash and others by two dashes?