1

現在、次のjavascriptコードを使用した代替のテーブル行の色があります。

function alternate(id){     
    if(document.getElementsByTagName){  
        var table = document.getElementById(id);   
        var rows = table.getElementsByTagName("tr");    
        for(i = 0; i < rows.length; i++){           
            if(i % 2 ==0 ){ 
                rows[i].className = "odd0"; 
            }else { 
                rows[i].className = "even2"; 
            }
        }
    }
} // end function

ここで追加したいのは、次のいずれかの条件を作成することです。

  • テーブル行にDivid"arrow"が存在する場合は、クラス名を"odd0"にします。

  • テーブルの行にDivid"arrow"が存在する場合は、クラス名をその上の行と同じ色にします。

私の最初の試みは、div id "arrow"が存在する場合、クラス名"odd0"を作成することでした。しかし、それは私のコードを壊すか、それを読み取らないだけです。

それを独自の関数にするか、forループ内に挿入することによって、次のことを試みました...

 if (document.getElementById("arrow")) {
  rows[i].className = "odd0";
 }

どんな助けでも大歓迎です！

4

2 に答える 2

2

'arrow'に設定されているIDを1つだけ使用する必要があることを理解するために、次の場合を想定しています。

 var arrow = document.getElementById('arrow');
 var row = arrow.parent;
 row.setAttribute('class', 'odd0');

このコードは、矢印divの親を取得し、そのクラスを「odd0」に設定します。jQueryを使用すると、次のように実行できます。

 $('#arrow').parent().addClass('odd0');

IDが'arrow'の複数のdivがある場合は、代わりにクラス矢印を持つようにそれらを変更する必要があり、コードは次のようになります。

 var arrows = document.getElementsByClassName('arrow');
 for(var i = 0; i < arrows.length; i++) {
     arrows.parent.setAttribute('class', 'odd0');
 }

または、jQueryを使用します

 $('.arrow').parent().addClass('odd0');
于 2012-04-10T17:52:42.907 に答える
1

あなたの質問は少し曖昧であり、あなたの要件は矛盾しているようです。しかし、あなたが望むのは、あなたの行にがない限り、あなたの行がとの間で交互になることだと思います。次に、現在の行にその上の行と同じクラスを持たせます。odd0even2arrow

私が間違っている場合は私を訂正してください。

jQueryをタグとして付けているので、jQueryの答えを示します。jQueryを知らない場合は、学ぶことをお勧めします。これにより、この種のクラス/ css操作がストレートJavaScriptよりもはるかに簡単になり、クロスブラウザーの問題がすべて処理されます。

function alternate(id) {
    var i = 1;
    // Go through each row
    $('#'+id).find('tr').each(function() {
        // If this isn't an "arrow" row, increment the count
        if ($(this).find('.arrow').length < 1) {
            i++;
        }
        // Decide whether the row is odd or even
        if (i % 2 == 0) {
            $(this).addClass('even2');
        } else {    
            $(this).addClass('odd0');
        }
    });
}

デモ： http： //jsfiddle.net/jtbowden/uBgYH/1/

于 2012-04-10T17:52:05.730 に答える