Comment voulez-vous écrire une fonction de ligne alternatif en utilisant le module en CoffeeScript?

Question

J'ai un exemple ici d'un morceau typique de JavaScript (code qui applique une classe de style d'arrière-plan à une alternance pair ou impair ligne dans une table). Je suis en train de réécrire cela en CoffeeScript dans ma tentative d'apprendre que. La syntaxe de la gamme CoffeeScript est différent et plus Ruby-esque. J'apprécierais vraiment un exemple de la façon dont vous le faire?

   function alternate(id){ 
     if(document.getElementsByTagName){  
       var table = document.getElementById(id);   
       var rows = table.getElementsByTagName("tr");   
       for(i = 0; i < rows.length; i++){           
     //manipulate rows 
         if(i % 2 == 0){ 
           rows[i].className = "even"; 
         }else{ 
           rows[i].className = "odd"; 
         }       
       } 
     } 
    }

Mise à jour

J'utilise JQuery et d'essayer cela, mais il ne fonctionne pas (il fait toutes les lignes #efefef):

$(document).ready ->
    rowCount = $('tbody tr')
    for row in rowCount        
        if row.length % 2 == 0
            $('tbody tr').css('background-color', '#363636')
        else
            $('tbody tr').css('background-color', '#efefef')

Answer 1

Un peu plus concis:

for row, i in $('tbody tr')
  color = if i % 2 is 0 then '#363636' else '#efefef'
  $(row).css 'background-color', color

Answer 2

Vous pouvez également être intéressé par le même / impair sélecteurs de méta fournis par jquery

$('tbody tr:even').css 'background-color', '#363636'
$('tbody tr:odd').css 'background-color', '#efefef'

Answer 3

Si votre objectif final est juste d'appliquer un style différent aux lignes paires / impaires, vous pouvez essayer ceci:

// CSS file

#myTable tr:nth-child(even) { background-color: #363636; }
#myTable tr:nth-child(odd)  { background-color: #efefef; }

Non JS ici, juste CSS ordinaire, ce qui est bon puisque le style est une préoccupation de présentation.

Cependant, il ne fonctionne que dans les navigateurs modernes (relativement): IE 9+, Firefox 4+, Chrome ...

Answer 4

Essayez for row, i in rows, où i détient le compteur de boucle.