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
