Kā izveidot zebru? Smarty, jQuery, CSS3

Ar zebru saprot tabulas rindiņu vai numurētā saraksta katras n-tās rindiņas iekrāsošanu. Tādā veidā ievērojami uzlabojot lasāmību. It īpaši garām tabulām. Rakstā apskatīti dažādi veidi, kā panākt katras otrās rindiņas iekrāsošanu pielietojot dažādus paņēmienus – css, css3, jquery un smarty.

1.  Izmantojot CSS statiskai tabulai:

table tr.even td {

   background: #cacaca;
}

<table>

<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>

<tr>
   <td>Lorem ipsum dolor sit amet</td>
</tr>

<tr class="even">
   <td>Lorem ipsum dolor sit amet</td>
</tr>

...

</table>

Priekšrocība – universāls, jo strādās uz visiem pārlūkiem.

Trūkums – der tikai statiskā tabulām;

2. Izmantojot CSS3

table tr:nth-child(even) {

   background-color: #cacaca;
}

<table>
<thead>
<tr>
   <th>Header</th>
</tr>
</thead>

<tbody>
<tr>
   <td>Lorem ipsum dolor sit amet</td>
</tr>

<tr>
   <td>Lorem ipsum dolor sit amet</td>
</tr>

...

</table>

Priekšrocība – derēs nedefinēta garuma tabulām;
Trūkums – css3 nestrādās uz vecākiem pārlūkiem, ts. IE8,7,6

3. Izmantojot javascript. jQuery bibliotēku.

.even {

  background: #cacaca;
}

$(document).ready(function(){

   $("tr:even").addClass("even");
});

Priekšrocība – derēs nedefinētā garuma tabulām, ja vien pārlūks atbalsts javascript;
Trūkums – garākām tabulām, sākumā ielādēsies tabula, pēc tam iekrāsosies.

4.  izmantojot javascript un jQuery bibliotēku. Sarežģītāks scenārijs.

$(document).ready(function(){

   $('table tr').each(function(i, it){

      if(i % 2 == 0) {

         $(this).addClass('even');
      }

   })

});

Elementa (rindas) kārtas numurs tiek dalīts un atkarībā no tā ir vai nav atlikums (% operators), tiek noteikts tā ir pāra vai nepāra rinda. Attiecīgi pāra rindām tiek pievienota css klase „even”, kura savukār nodrošina rindiņas iekrāsošanu.

5. Izmantojot PHP šablonu sistēmu Smarty.

<table>
<thead>
<tr>
   <th>Header</th>
</tr>
</thead>

<tbody>

{foreach from=$items item=item name=foo}

   <tr {if $smarty.foreach.foo.index % 2}class="even"{/if}>

      <td>Lorem ipsum dolor sit amet</td>

   </tr>

{/foreach}

</tbody>
</table>

Kā redzam, mehānisms ir līdzīgs – elementa kārtas numurs tiek dalīts ar 2 un atkarībā no tā ir vai nav atlikums tiek noteikts tas ir pāra vai nepāra ieraksts. Klases ieraksts tiek pievienots šablonā. Šī metode ir universālāka par 1, jo ļauj tabulu apstrādāt dinamiski.

6. Izmantojot PHP šablonu sistēmu Smarty. Sarežģītāks scenārijs.

{counter assign=k start=0}

{foreach from=$items item=item name=foo}

   {math equation="n % 2" n=$k assign="nth"}

      <tr {if $nth}class="even"{/if}>
         <td>Lorem ipsum dolor sit amet </td>
      </tr>

   {counter}

{/foreach}

Šinī scenārijā kārtas numurs tiek inkrementēts katru izsaucot operatoru - counter.  Noderīgs gadījumos, ja cikla foreach kārtas numurs kādu iemeslu dēļ nevar tik izmantots. Piemēram, gadījumos, ja pirms html ieraksta izveidošanas notiek salīdzināšana (vai ieraksts nav tukšs, uc.).  Inkrementētais kārtas numurs – k tiek dalīts un noteikts tas ir pāra vai nepāra ieraksts.

Izmantotie avoti:

-  http://www.smarty.net/
-  http://www.quirksmode.org/css/nthchild.html