我来到这里的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保持循环计数器。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top