JQ表格隔行换色
程序员文章站
2023-02-20 22:45:19
JQ :even选择器代表着选择偶数行 JQ :odd 代表选择奇数行 ......
<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 代表选择奇数行