JQuery-Table斑马线
HTML
<html>
<head>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="Jquery.js" type="text/javascript"></script>
<script src="JavaScript.js" type="text/javascript"></script>
</head>
<title>斑馬線</title>
<body>
<div id="bodydiv">
<table cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lost In The Plot</td>
<td>The Dears</td>
</tr>
<tr>
<td>2</td>
<td>Poison</td>
<td>The Constantines</td>
</tr>
<tr>
<td>3</td>
<td>Plea From A Cat Named Virtute</td>
<td>The Weakerthans</td>
</tr>
<tr>
<td>4</td>
<td>Melissa Louise</td>
<td>Chixdiggit!</td>
</tr>
<tr>
<td>5</td>
<td>Living Room</td>
<td>Tegan And Sara</td>
</tr>
<tr>
<td>6</td>
<td>Speed</td>
<td>Bran Van 3000</td>
</tr>
<tr>
<td>7</td>
<td>Fast Money Blessing</td>
<td>King Cobb Steelie</td>
</tr>
<tr>
<td>8</td>
<td>Sore</td>
<td>Buck 65</td>
</tr>
<tr>
<td>9</td>
<td>Love Travel</td>
<td>Danko Jones</td>
</tr>
<tr>
<td>10</td>
<td>You Never Let Me Down</td>
<td>Furnaceface</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS(StyleSheet.css)
body
{
width:100%;
height:100%;
margin:auto;
text-align:center;
}
#bodydiv
{
height:100%;
}
table
{
width: 100%;
}
JS(Jquery.js)
$(function(){
//tr:eq(0)是指第一個tr eq=equal
//tr:gt(0)是指除去第一個以外的所有tr gt=grater than
$("tr:eq(0)").css("background-color","#8888ff"); //標題的樣式
$("tr:gt(0):even").css("background-color","#ffffcc"); //奇數行的樣式
$("tr:gt(0):odd").css("background-color","#ccccff"); //偶數行的樣式
$("tr:gt(0)").mouseenter(function(){
var color = $(this).css("background-color");
$(this).css("background-color","#5555ff");
$(this).mouseleave(function(){
$(this).css("background-color",color);
});
$(this).mousedown(function(){
$(this).css("background-color","#2222ff");
});
$(this).mouseup(function(){
$(this).css("background-color","#5555ff");
});
});
});
ref:?http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html
源碼下載：http://files.cnblogs.com/zisezhixin/斑馬線.zip
轉載于:https://www.cnblogs.com/zisezhixin/p/4189434.html
總結
以上是生活随笔為你收集整理的JQuery-Table斑马线的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： (王道408考研操作系统)第五章输入/输
- 下一篇： 数据结构之排序算法：基础概念