html color to alternative rows of dynamic table

Question

I have a Dynamic table that I want to give color to on alternative rows. How can I achieve this with css? I need the code to work in IE7+

Answer 1

Look into using even/odd rules in CSS3.

Reference: https://developer.mozilla.org/en/CSS/:nth-child

For instance,

tr:nth-child(odd) will represent the CSS for every 2n + 1 child, whereas tr:nth-child(even) will represent the CSS for every 2n child.

Answer 2

CSS3 nth-child selector:

tr:nth-child(odd) {
  background: red /* or whatever */;
}

Answer 3

You can use a CSS3 selector:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

or jQuery:

$("tr:even").css("background-color", "#CCC");
$("tr:odd").css("background-color", "#FFF");

or do it on the server side.

Answer 4

i came across this same problem Friday, i used the jquery solution of

$("tr:even").css("background-color", "#CCC");
$("tr:odd").css("background-color", "#FFF");

• a stack overflow solution .js posted here Detect changes in the DOM

so essentially you add the .js script in the head and fire the jquery rules on dom change.

My finished .js looked like this

<script type="text/javascript">
    (function (window) {

        var last = +new Date();
        var delay = 100; // default delay

        // Manage event queue
        var stack = [];

        function callback() {
            var now = +new Date();
            if (now - last > delay) {
                for (var i = 0; i < stack.length; i++) {
                    stack[i]();
                }
                last = now;
            }
        }

        // Public interface
        var onDomChange = function (fn, newdelay) {
            if (newdelay)
                delay = newdelay;
            stack.push(fn);
        };

        // Naive approach for compatibility
        function naive() {

            var last = document.getElementsByTagName('*');
            var lastlen = last.length;
            var timer = setTimeout(function check() {

                // get current state of the document
                var current = document.getElementsByTagName('*');
                var len = current.length;

                // if the length is different
                // it's fairly obvious
                if (len != lastlen) {
                    // just make sure the loop finishes early
                    last = [];
                }

                // go check every element in order
                for (var i = 0; i < len; i++) {
                    if (current[i] !== last[i]) {
                        callback();
                        last = current;
                        lastlen = len;
                        break;
                    }
                }

                // over, and over, and over again
                setTimeout(check, delay);

            }, delay);
        }

        //
        //  Check for mutation events support
        //

        var support = {};

        var el = document.documentElement;
        var remain = 3;

        // callback for the tests
        function decide() {
            if (support.DOMNodeInserted) {
                window.addEventListener("DOMContentLoaded", function () {
                    if (support.DOMSubtreeModified) { // for FF 3+, Chrome
                        el.addEventListener('DOMSubtreeModified', callback, false);
                    } else { // for FF 2, Safari, Opera 9.6+
                        el.addEventListener('DOMNodeInserted', callback, false);
                        el.addEventListener('DOMNodeRemoved', callback, false);
                    }
                }, false);
            } else if (document.onpropertychange) { // for IE 5.5+
                document.onpropertychange = callback;
            } else { // fallback
                naive();
            }
        }

        // checks a particular event
        function test(event) {
            el.addEventListener(event, function fn() {
                support[event] = true;
                el.removeEventListener(event, fn, false);
                if (--remain === 0) decide();
            }, false);
        }

        // attach test events
        if (window.addEventListener) {
            test('DOMSubtreeModified');
            test('DOMNodeInserted');
            test('DOMNodeRemoved');
        } else {
            decide();
        }

        // do the dummy test
        var dummy = document.createElement("div");
        el.appendChild(dummy);
        el.removeChild(dummy);

        // expose
        window.onDomChange = onDomChange;

    })(window);



    $(document).ready(function () {
        $("tr:even").css("background-color", "#CCC");
        $("tr:odd").css("background-color", "#FFF");
        onDomChange(function () {
            $("tr:even").css("background-color", "#CCC");
            $("tr:odd").css("background-color", "#FFF");
        });
    });
</script>    

I would like to caveat this answer that this probably is not the greatest solution but worked for what i needed it to do. :-)