-2

現在、以下のコードを使用して、値に基づいてセルに色を付けています。

cell.each(function() {
            var cell_value = $(this).html();
            if (cell_value == 0){
                $(this).css({'background' : '#DF0101'});  
            } else if ((cell_value >= 1) && (cell_value <=10)) {
                $(this).css({'background' : '#FF7C00'});
            } else if (cell_value >= 8) {
                $(this).css({'background' : '#04B404'});
            }
        });

また、CSS をスタイルシートに追加しました。

td:hover{
background-color:#CA2161;}

では、ホバー時にJavaScriptで処理されたセルの色が変わるようにするにはどうすればよいですか? 全く変わらない分、上で加工した色のままです^^

4

2 に答える 2

0

編集：ホバーしたときに表示するのではなく、色を残したいことがわかりました。シンプルな変更。

まず第一に、これらを CSS クラスに分離する必要があります。

.ZeroValue {
    background:'#DF0101';
}

.ValueBetween1And10 {
    background:'#FF7C00';
}

.ValueOver8 {
    background:'#04B404';
}

.ValueTransparent {
    background:transparent !important;
}

$(document).ready()値に基づいて上記のクラスを追加します。

if(cell_value === 0){
    cell.addCLass('ZeroValue');
} else if((cell_value >= 1) && (cell_value <= 10)){
    cell.addClass('ValueBetween1And10');
} else if(cell_value >= 8){
    cell.addClass('ValueOver8');
}

transparent次に、ホバーしたときにクラスを動的に追加し、離れるときにクラスを削除します。

cell.on({
    mouseenter:function(){
        $(this).addClass('ValueTransparent');
    },
    mouseleave:function(){
        $(this).removeClass('ValueTransparent');
    }
});

または、各アイテムに固有の色があり、それを一時的に削除したい場合は、関数を作成するだけです:

function classByValue(cell,cell_value){
    if(cell_value === 0){
        cell.addCLass('ZeroValue');
    } else if((cell_value >= 1) && (cell_value <= 10)){
        cell.addClass('ValueBetween1And10');
    } else if(cell_value >= 8){
        cell.addClass('ValueOver8');
    }
}

これにより、マウスが入力されたときにクラスがクリアされ、マウスが入力されたときにクラスが再度追加されcell_valueます。次に、ロード時とときに動的に適用しますmouseleave。$(document).ready()：_

cell.each(function(){
    classByValue(this,this.val());
});

そしてホバー：

cell.on({
    mouseenter:function(){
        $(this).removeClass('ZeroValue ValueBetween1And10 ValueOver8');
    },
    mouseleave:function(){
        classByValue($(this),$(this).val());
    }
});

これで、目標を達成するための複数の方法が見つかりました。$(this).val()その特定の の値を適切に反映するように変更する必要があるかもしれませんがcell、HTML がなければ、それを実際に判断することはできません。

余談ですが、最後のオプション with>= 8はおそらく再検討する必要があります。なぜなら、8orの値がそれを起動9することはないからです。

于 2013-11-04T15:46:39.853 に答える