你会如何写在CoffeeScript中使用模量的交替行的功能?
-
26-09-2019 - |
题
我来到这里的JavaScript的一个典型块(代码,将应用背景风格类的交替奇数或偶数表中的行)的一个例子。我想在我试图得知改写这个在CoffeeScript的。所述的CoffeeScript范围语法是不同的,并且更红宝石式的。我会很感激你将如何做到这一点的例子吗?
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";
}
}
}
}
更新
我使用jQuery和尝试这一点,但它不工作(它使所有行#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')
解决方案
一个小更简洁:
for row, i in $('tbody tr')
color = if i % 2 is 0 then '#363636' else '#efefef'
$(row).css 'background-color', color
其他提示
您也可以通过jquery的
提供的偶/奇选择器元感兴趣$('tbody tr:even').css 'background-color', '#363636'
$('tbody tr:odd').css 'background-color', '#efefef'
如果你的最终目标是只是不同的风格适用于奇数/偶数行,你可以试试这个:
// CSS file
#myTable tr:nth-child(even) { background-color: #363636; }
#myTable tr:nth-child(odd) { background-color: #efefef; }
没有JS在这里,只是普通的CSS,这是因为造型好是一个演示文稿的关注。
但是它只能在(相对)现代浏览器:IE 9,Firefox 4以上版本,Chrome浏览器...
尝试for row, i in rows
,其中i
保持循环计数器。
不隶属于 StackOverflow