0

2 つのテーブルがあり、1 つには白い行があり、もう 1 つにはすべて緑色の行があるとします。

私は現在、白い背景に対してこれを行うstripeTableコードを持っています:

function stripeTables($tables) {
    $("tbody tr:odd td,tbody tr:odd th", $tables).css("background-color", "#f7f6f6");
}

しかし、奇数行を少し暗くするような関数が欲しいので、ベースの背景が白でない場合でも、「いくつかのRGB」値を「暗く」変化させて、選択する必要がないようにします別の色。

これをすばやく行う方法についてのアイデアはありますか? 背景の RGB 値を読み取ってから、より暗い値を計算することを考えていましたが、その方法についてはまったくわかりません。

アップデート:

jquery-colorソリューションで私が抱えている問題は 、現在の背景色を提供する必要があることです。これは、td/th レベル AND tr レベル AND TABLE レベル AND 上記の他の要素で設定できるためです。私のテーブルは背景として色 X を持ちます。少なくとも $(this).css('background-color') を使用している場合はそうではありません (ストライプ色を適用する CSS レベルで background-color が定義されていない場合、これは undefined を返します。

jQueryと色計算で提示された方法でjsColors getRGB関数を使用する

function stripeTables($tables) {
    //    $("tbody tr:odd td,tbody tr:odd th", $tables).css("background-color", "#f7f6f6");
    $("tbody",$tables).each(function () {
        $("tr:odd td,tr:odd th", $(this)).css('background-color', function () {

            var rgb = getRGB($(this).css('background-color'));
            if (!rgb) {
                rgb = getRGB("#FFF");
            }
            for (var i = 0; i < rgb.length; i++) {
                rgb[i] = Math.max(0, rgb[i] - 10);
            }
            var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
            return newColor;

        }, 1500);
    });
}

コードは現在、白い背景でのみ機能します:

具体的な更新された質問です。その CSS レベルで設定されていなくても、要素の実際の背景色 hex/rgb を知る必要があります。

4

0 に答える 0