How to change the bottom lines of a table alternately? With support for older browsers

Asked

Viewed 2,089 times

6

My table is created with a PHP loop. I do this by PHP even adding a condition or has some better shape?

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>';
 }
php css jquery loop

6 answers

16


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: These are properties of CSS3 and do not work in older browsers.

  • Before testing, is this css3? I need you to support old browsers.

  • 1

    From IE9 up this CSS is supported. Check out: http://caniuse.com/#feat=css-sel3

  • 4

    @Joaopaulo You can add CSS3 support on IE8 with Selectvizer. If it works for your case, it’s nice to use the :nth-child for being web standard. =)

  • Thanks to all the answers. But the important thing is that users can see the best way without worrying about version! So I will initially use the php condition itself.

11

Put a ternary "if" in the code to know if your $i counter is odd, or even, depending on what it is 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, but it doesn’t work in all browsers unfortunately...

7

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" );
  • 1

    Actually there are several options, more particularly, I believe that the less JS in your application the better, it is ideal in many situations, the more overload the page, not in this case it is a relatively simple operation, Anyway, the processing in this case is much faster being done in PHP, after all, it will already go through your loop anyway, only with an if more, but, only that you are working in your application really know what is best for her...!

  • 1

    I say more suitable for ease of maintenance. Because if I had 10 tables, I would have to find the loop of each one and go there in the code to insert that if. With jquery if I want can serve for all tables I create.

  • Great argument, really the JS is better in this case...

  • Just a warning: in your answer you have the same background color for :even and to :odd, for the sake of consistency with the question, I suggested you change one of the colors.

5

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, the user must use at least the following versions of browsers:

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

IE, does not work in IE 8 and older.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/:Nth-Child

5

You don’t need to use code to do this, whether in PHP or Javascript, only CSS.

Take this example:

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

Then just add the class tabela on 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");
});

  • I found this answer more complete. It provided the same information as the other answers (including the author’s own answer) in a unified way.

1

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

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

Browser other questions tagged php css jquery loop

You are not signed in. Login or sign up in order to post.