JQ表格隔行换色

Posted 2021-02-05 dainney

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 代表选择奇数行

以上是关于JQ表格隔行换色的主要内容，如果未能解决你的问题，请参考以下文章

JQuery案例一：实现表格隔行换色

jQuery实现的table表格隔行换色代码实例