Criando o efeito zebra em tabelas com JQuery

Criando o efeito zebra em tabelas com JQuery

Vamos fazer um efeito zebra com jquery.

Colorir as linhas de uma tabela é um requisito comum. A abordagem mais comum é usar um código personalizado na view para adicionar estilos alternados. No entanto, é possível fazer isso com Css e Jquery.

Vamos Adicionar uma Tabela em Html:

<div class="style-tabela">
    <table id="tabela" border="0" cellpadding="0" cellspacing="0" width="100%">
               
      <tbody>     
          <tr>
              <td class="top center"><i class="icofont-users-alt-4"></i></td>
              <td class="top center"><strong>Nome</strong></td>
              <td class="top center"><strong>E-mail</strong></td>
              <td class="top center"><strong>Data de Cadastro</strong></td>
              <td class="top center" colspan="2" width="1"><strong>Ações</strong></td>
          </tr>      
      </tbody>

    <tbody>
              
     <tr> 

           <td align="center">1</td>
           <td align="center">Pedro</td>
           <td align="center">predro@site.com.br</td>
           <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
           <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
           <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
     </tr>

     <tr class="mensagemAlerta"> 

          <td align="center">2</td>
          <td align="center">Lucas</td>
          <td align="center">lucas@site.com.br</td>
          <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
          <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
          <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
      </tr>

      <tr> 

          <td align="center">3</td>
          <td align="center">Carla</td>
          <td align="center">carla@site.com.br</td>
          <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
          <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
          <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
      </tr>

      <tr> 

         <td align="center">4</td>
         <td align="center">Monica</td>
         <td align="center">monica@site.com.br</td>
         <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
         <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
         <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
       </tr>

       <tr> 

          <td align="center">5</td>
          <td align="center">Alex</td>
          <td align="center">alex@site.com.br</td>
          <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
          <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
          <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                     
       </tr>

       <tr> 

          <td align="center">6</td>
          <td align="center">José</td>
          <td align="center">jose@site.com.br</td>
          <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
          <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
          <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
       </tr>

       <tr> 

           <td align="center">7</td>
           <td align="center">Adriano</td>
           <td align="center">adriano@site.com.br</td>
           <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
           <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
           <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
        </tr>

        <tr> 

           <td align="center">8</td>
           <td align="center">Rafael</td>
           <td align="center">rafel@site.com.br</td>
           <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
           <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
           <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
         </tr>

         <tr> 

            <td align="center">9</td>
            <td align="center">Luciano</td>
            <td align="center">luciano@site.com.br</td>
            <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
            <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
            <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
          </tr>

          <tr> 

             <td align="center">10</td>
             <td align="center">Miguel</td>
             <td align="center">miguel@site.com.br</td>
             <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td>
             <td align="center"> <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td>
             <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
                      
           </tr>
                      
     </tbody>
 </table>
 </div><!--tabela-->

Agora vamos usar o Css para estilizar a tabela

/*Tabela*/
.style-tabela table{ float:left; border:1px solid #ccc; border-bottom:0; border-right:0; font-size:0.8em; }
.style-tabela table tr td  { padding:0.5em; border:1px solid #ccc; border-top:0; border-left:0;}
.style-tabela table td.top { background-color:#00bcc4; color:#fff; font-size:1.2em;}
.style-tabela table td.top.center {text-align: center;}
.style-tabela table td.total { text-align:left; font-weight: bold;}
.style-tabela table td.top-toltip{ background-color:#207d97; height:25px;  color:#fff; font-size:16px;}
.style-tabela tbody tr td    {padding:0.3em; border:1px solid #ccc; border-top:0; border-left:0;}
.style-tabela tbody tr       {background-color:#fff; color:#666;}
.style-tabela tbody tr:hover {background-color:#f4f4f4; color:#00bcc4;}
 

.style-tabela tbody tr td .editar  { color:#00d549; font-size:1.2em; font-weight:bold; display:inline; text-decoration:none;} 
.style-tabela tbody tr td .deletar { color:#bf303c; font-size:1.2em; font-weight:bold; display:inline; text-decoration:none; }

.style-tabela tbody tr.mensagemAlerta { background-color:#fdeeef; color:#bf303c;}

/*Classe adicionada no jquery*/
#tabela tr.impar { background:#f4f4f4;  }
#tabela tr.par   { background:#f1fafb;  }


/*Se vocÊ Quiser Remover o scrip e usar só o Css Desabilite aqui*/
/*#tabela tr:nth-child(odd)  { background-color:#ccc; }*/  
/*#tabela tr:nth-child(even) { background-color:#f4f4f4; } */

/*Tabela*/

Por último vamos adicionar o Jquery

<script>

    //Código jQuery para adicionar o efeito zebra na tabela.
    $(document).ready(function() {

       $('#tabela tbody tr:odd').addClass('impar');
     //$('#tabela tbody tr:even').addClass('par');
    
    });

</script>

Baixar Código Veja Funcionando