Como você escreveria uma função de linha alternada usando o Modulus no CoffeeScript?
-
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')
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.