4

ここに、JavaScriptの典型的なチャンク（テーブル内の交互の奇数行または偶数行にバックグラウンドスタイルクラスを適用するコード）の例を示します。私はそれを学ぶためにCoffeeScriptでこれを書き直そうとしています。CoffeeScriptの範囲の構文は異なり、Ruby風です。あなたがこれをどのように行うかの例を本当に感謝しますか？

   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')
4

4 に答える 4

5

もう少し簡潔：

for row, i in $('tbody tr')
  color = if i % 2 is 0 then '#363636' else '#efefef'
  $(row).css 'background-color', color
于 2010-11-18T18:37:17.883 に答える
5

jqueryが提供する偶数/奇数のメタセレクターにも興味があるかもしれません

$('tbody tr:even').css 'background-color', '#363636'
$('tbody tr:odd').css 'background-color', '#efefef'
于 2010-11-21T03:13:17.177 に答える
1

最終目標が奇数/偶数行に異なるスタイルを適用することだけである場合は、これを試すことができます。

// 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 ...）でのみ機能します。

于 2012-09-13T06:42:23.013 に答える
0

を試してくださいfor row, i in rows。ここでi、ループカウンターを保持します。

于 2010-11-18T18:28:36.410 に答える