jQuery双色表格的实现

最新推荐文章于 2014-08-26 23:33:53 发布

piperzero

最新推荐文章于 2014-08-26 23:33:53 发布

阅读量1.7k

点赞数

分类专栏：网站建设文章标签： jquery function c

网站建设专栏收录该内容

740 篇文章 1 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> jquery </title> 
<script type="text/javascript" src="jquery.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
$(document).ready(function(){ 
//jQuery ready is quicker than onload 
$(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); 
$(".stripeMe tr:even").addClass("alt"); 
}); 
</script> 
<style type="text/css"> 
table.sample {}{ 
border-collapse: collapse; 
width: 50%; 
margin: 24px; 
font-size: 1.1em; 
} 
table.sample th {}{ 
background: #3e83c9; 
color: #fff; 
font-weight: bold; 
padding: 2px 11px; 
text-align: left; 
border-right: 1px solid #fff; 
line-height: 1.2; 
} 
table.sample td {}{ 
padding: 6px 11px; 
border-bottom: 1px solid #95bce2; 
vertical-align: top; 
} 
table.sample td * {}{ 
padding: 6px 11px; 
} 
table.sample tr.alt td {}{ 
background: #ecf6fc; 
} 
table.sample tr.over td {}{ 
background: #bcd4ec; 
} 
</style> 
<table class="stripeMe sample"> 
<thead> 
<tr> 
<th>Lorem</th> 
<th>Ipsum</th> 
<th>Dolor</th> 
<th>Sit</th> 
<th>Amet</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
<tr> 
<td>Lorem</td> 
<td>Ipsum</td> 
<td>Dolor</td> 
<td>Sit</td> 
<td>Amet</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 
 