<table class="datalist" id="oTable">
先写好两个tr的class.如class1,class2
1.使用javascript
window.οnlοad=function(){
var table=document.getelementbyId("oTable");
for (var i=0;i<=table.rows;i++){
if (i%2==0){
table.rows[i].className="class2";
}
}
}
2.使用jquery
<script language="javascript" src="jquery.min.js"></script>
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("class2";);
});
完整例子:
test.html
<html><head><style type="text/css">#pageContent{width: 100%;}
#innerContent{}
.pageContent table{width: 100%;margin-top: 3px;border: solid 1px #CCCCCC; text-align: center;}
.pageContent th{background-color: #C0C9D0; height: 22px;}
.pageContent table a{color: #144AA0;}
.pageContent table .icon{width: 32px;}
.pageContent table .caption{text-align: left;}
.pageContent table .point{width: 30px;}
.pageContent table .author{width: 110px;}
.pageContent table .replyCount{width: 60px;}
.pageContent table .lastReply{width: 120px;}
.pageContent table .function{width: 32px;}
.pageContent table .caption a{color: #333333;}
.pageContent table .light{}
.pageContent table .dark{background-color: #F5F5F5;}
</style>
</head>
<body>
<div class="pageContent"><table class="datalist" ><tr><th>名次</th><th>专家</th><th>积分</th>
</tr>
<tr><td>1</td><td>madixin</td><td>111</td></tr>
<tr><td>2</td><td>yaoming</td><td>222</td></tr>
</table>
</div>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript">
//奇数行变色
$(function(){ $("table.datalist tr:nth-child(odd)").addClass("dark"); });
$("table.datalist tr").hover( function(){ $(this).addClass("dark"); //鼠标经过添加hover样式 }, function(){ $(this).removeClass("dark"); //鼠标离开移除hover样式 });
</script>
</body></html>
