JQ表格隔行換色
阿新 • • 發佈：2019-01-24
auto size clas wid 選擇 java highlight alt image
<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表格隔行換色