HTML中的交替行颜色？

Question

我有以下HTML：

<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
            <tr>
            <td>
                <table class="PopupInnerContent">
                    <tr>
                        <td>Are you guys open today? What is your return policy?</td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td>
                <table class="PopupInnerContent">
                    <tr>
                        <td>Hi yes we are open today. Out return policy is 7 days with original receipt.</td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <textarea class="mediumResolution required"></textarea>
                </td>
            </tr>
        </table>

我申请了 关注JQuery：

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

问题是在应用Jquery之后。包含innerTable的tr也会受到这个Jquery的影响：我如何防止影响InnerTable的Tr ??

Answer 1

 $(".ChatBox > tr:pseudoclass")

USE＆gt;在进入儿童之间

Answer 2

试试这个：

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

仅适用于.chatbox

的直接子女

Answer 3

试试这个，

$(document).ready(function () {
    $('.ChatBox > tbody > tr:odd').css("background-color", "Blue");
    $('.ChatBox > tbody > tr:even').css("background-color", "#EAEAEA");

});