表格的隔行换色和高亮显示 

<!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"> 
<html>
<head>
<script src="http://img.jb51.net/jslib/jquery/jquery1.3.2.js"></script> 
<style type="text/css"> 
#hacker tr:hover{ 
background-color:red;
} 
<!-- ie 不支持
#hacker tr:nth-of-type(odd){background:#00CCFF;}/*奇数行*/
#hacker tr:nth-of-type(even){background:#FFCC00;}/*偶数行*/
-->
.odd{background:#FFCC00;}
</style> 

<script type="text/javascript">
$(document).ready(function() { 

     $("table tr:nth-child(even)").addClass("odd");
});
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="200px" height="300px"; bgColor="#8E8E8E" id="hacker">
<tr>
<td>1</td>  <td>1</td>  <td>1</td> <td>1</td>
</tr>
<tr>
<td>1</td>   <td>1</td>   <td>1</td>  <td>1 </td>
</tr>
<tr>
<td>1</td>   <td>1</td>  <td>1</td>  <td>1</td>
</tr>
<tr>
<td>1</td>   <td>1</td>  <td>1</td>  <td>1</td>
</tr>
</table>
</body>
</html>

 

posted @ 2013-07-27 19:11  令狐冲之12  阅读(304)  评论(0)    收藏  举报