Question

我有一个动态表，我想在替代行上给出颜色。我怎样才能用css实现这个目标？我需要代码在IE7 +

中工作

Answer 1

研究在CSS3中使用偶数/奇数规则。

参考：https://developer.mozilla.org/en/CSS/:nth-child

例如，

tr:nth-child(odd)代表每个2n + 1孩子的CSS，而tr:nth-child(even)代表每个2n孩子的CSS。

Answer 2

CSS3 nth-child选择器：

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

Answer 3

您可以使用CSS3 selector：

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

或jQuery：

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

或在server side上进行。

Answer 4

我星期五遇到了同样的问题，我使用了

的jquery解决方案

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

此处发布了堆栈溢出解决方案.js Detect changes in the DOM

所以基本上你在头部添加.js脚本并在dom更改时触发jquery规则。

我完成的.js看起来像这样

<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>

我想告诫这个答案，这可能不是最好的解决方案，但我需要它做的工作。： - ）

html颜色到动态表的替代行

4 个答案: