html - 動的テーブルの代替行へのhtml色

Question

代替行に色を付けたい動的テーブルがあります。cssでこれを達成するにはどうすればよいですか? IE7+ で動作するコードが必要です

Answer 1

CSS3 での偶数/奇数ルールの使用を検討してください。

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

例えば、

tr:nth-child(odd)はすべての子の CSS を表し、 はすべて2n + 1の子tr:nth-child(even)の CSS を表し2nます。

Answer 2

私は金曜日にこの同じ問題に遭遇しました。私はjqueryソリューションを使用しました

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

• ここに投稿されたスタック オーバーフロー ソリューション .js 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>    

これはおそらく最大の解決策ではありませんが、私が必要としていたことにはうまくいったというこの答えに注意したいと思います。:-)

Answer 3

CSS3 セレクターを使用できます。

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

またはサーバー側で実行します。

Answer 4

CSS3 の n 番目の子セレクター:

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