どのようにCoffeeScriptの中モジュラスを使用して交互に行関数を書くのでしょうか?
-
26-09-2019 - |
質問
私には、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')
解決
Aもう少し簡潔ます:
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+、クローム...
for row, i in rows
は、ループカウンタを保持しているi
を、試してみてください。
所属していません StackOverflow