Como você escreveria uma função de linha alternada usando o Modulus no CoffeeScript?

StackOverflow https://stackoverflow.com/questions/4217825

  •  26-09-2019
  •  | 
  •  

Pergunta

Eu tenho um exemplo aqui de um pedaço típico de JavaScript (código que aplicaria uma classe de estilo de fundo a um ímpar alternado ou até linha em uma tabela). Estou tentando reescrever isso no CoffeeScript na minha tentativa de aprender isso. A sintaxe do alcance do CoffeeScript é diferente e mais rubi-estilo. Eu realmente apreciaria um exemplo de como você faria isso?

   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"; 
         }       
       } 
     } 
    }

Atualizar

Estou usando o jQuery e tentando isso, mas não funciona (faz com que todas as linhas #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')
Foi útil?

Solução

Um pouco mais conciso:

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

Outras dicas

Você também pode estar interessado nos meta seletores pares / ímpares fornecidos pela JQuery

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

Se seu objetivo final é apenas aplicar um estilo diferente a linhas ímpares/uniformes, você pode tentar o seguinte:

// CSS file

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

Não há JS aqui, apenas CSS, o que é bom, já que o estilo é uma preocupação de apresentação.

No entanto, ele só funciona em navegadores (relativamente) modernos: ou seja, 9+, Firefox 4+, Chrome ...

Tentar for row, i in rows, Onde i segura o contador de loop.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top