JQ表格隔行换色 

 <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 15px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        ul {
            list-style: none;
            border: 1px solid #5bc0de;
            width: 600px;
            margin: 0 auto;
            padding: 0px;
        }

        li {
            padding: 10px 30px;
            cursor: pointer;
        }

        .c1 { /*奇数行颜色*/
            background-color: #5bc0de;
        }

        .c2 { /*偶数颜色*/
            background-color: #f7e1b5;
        }

        .c3 { /*移入颜色*/
            background-color: #999;
        }
    </style>
</head>
<body>
<ul>
    <li>A</li>
    <li>B</li>
    <li>A</li>
    <li>B</li>
    <li>A</li>
    <li>B</li>
    <li>A</li>
    <li>B</li>
</ul>
<script type="text/javascript">
 $("li:even").addClass("c2");
 $("li:odd").addClass("c1");
</script>

 

　

　JQ  :even选择器代表着选择偶数行

      JQ   :odd 代表选择奇数行

 

posted @ 2019-01-23 23:23  Dainney  阅读(349)  评论(0)  编辑  收藏  举报