CODEWITHSUNDEEP
htmlcssjsp
Mr.Chowdary
Mr.Chowdary

Reputation: 3407

html color to alternative rows of dynamic table

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+

Upvotes: 1

Views: 5459

Answers (4)

Daniel Li
Daniel Li

Reputation: 15379

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.

Upvotes: 3

Nicholas King
Nicholas King

Reputation: 938

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

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. :-)

Upvotes: 2

Stefan
Stefan

Reputation: 114178

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.

Upvotes: 2

chipcullen
chipcullen

Reputation: 6960

CSS3 nth-child selector:

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

Upvotes: 2

Related Questions