0

Let's say I had Two tables, one has white rows, and one has all green rows.

I currently have stripeTable code that does this for white backgrounds:

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

but I'd want a function that kind of makes the odd rows a bit darker, so that if the base background isn't white, it still just varies 'some RGB' value 'darker' so that I do not have to select a different colour.

Any Ideas on how to do this in a fast way? I was thinking of reading RGB values of the background and then calculating a darker value for it, but i'm quite clueless on how to do that.

UPDATE:

The problem I have with the jquery-color solution is that I need to provide the current bg color, since that can be set on td/th level AND tr level AND TABLE level AND any other element above I can't really be sure that my table will have color X as background. At least not when using $(this).css('background-color'), (this returns undefined if the background-color is not defined at CSS level of thing i'm applying the stripe color to.

using jsColors getRGB function in the way presented over at jQuery and colour calculation 

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);
    });
}

code only works with white backgrounds now:

Concrete Updated question, I need to get to know the ACTUAL background color hex/rgb of an element, even if it's not set at that CSS LEVEL

Community
  • 1
  • 1
Michiel Cornille
  • 2,067
  • 1
  • 19
  • 42
  • 2
    Why not just give the rows a black background and then vary the opacity? – Pointy Jan 10 '13 at 16:01
  • You would need to know the bg-color of the normal table rows anyway. But if you do you might want to try this plugin: https://github.com/jquery/jquery-color/ – Dziad Borowy Jan 10 '13 at 16:04
  • Pointy, Don't you think the opacity variations will create transparant row data? @tborychowski that looks nice, gonna test around with it a bit – Michiel Cornille Jan 10 '13 at 16:08
  • I believe Pointy is right. Otherwise you may have to look ingo hexadecimal math to figure out what a lighter color may be. Wouldn't worth the time IMO – chadpeppers Jan 10 '13 at 16:11
  • 1
    If you use a pre-processor like SASS you could do this by assigning classes for even/odd and using the `darken()` method. – Evan Davis Jan 10 '13 at 16:46

0 Answers0