Wie würden Sie eine alternierende Zeilenfunktion Modul in Coffeescript schreiben?
-
26-09-2019 - |
Frage
Ich habe hier ein Beispiel eines typischen Stück JavaScript (Code, den ungerade eine Hintergrundstil-Klasse mit einem Wechsel gelten würde oder sogar in einer Tabellenzeile) bekomme. Ich versuche, dies in Coffeescript in meinem Versuch, neu zu schreiben, das zu lernen. Die Coffee Bereich Syntax ist anders und Rubin-artige. Ich würde wirklich ein Beispiel schätzen, wie Sie dies tun würden?
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";
}
}
}
}
Update
Ich bin mit JQuery und zu versuchen, diese aber es funktioniert nicht (es macht alle Zeilen #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')
Lösung
Ein wenig prägnante:
for row, i in $('tbody tr')
color = if i % 2 is 0 then '#363636' else '#efefef'
$(row).css 'background-color', color
Andere Tipps
Sie können auch in den gerade / ungerade Meta-Selektoren von jquery
vorgesehen interessiert sein$('tbody tr:even').css 'background-color', '#363636'
$('tbody tr:odd').css 'background-color', '#efefef'
Wenn Ihr Endziel ist nur eine andere Art zu gerade / ungerade Zeilen anwenden, können Sie dies versuchen:
// CSS file
#myTable tr:nth-child(even) { background-color: #363636; }
#myTable tr:nth-child(odd) { background-color: #efefef; }
Kein JS hier, einfach nur CSS, das gut, da Styling ist eine Präsentation betreffen.
es funktioniert jedoch nur in (relativ) modernen Browsern: IE 9+, Firefox 4+, Chrome ...
Versuchen for row, i in rows
, wo i
den Schleifenzähler hält.