您的位置：首页 > 其它

实现表格隔行变色

2009-09-20 10:00 330 查看

<table class="datalist" id="oTable">

先写好两个tr的class.如class1,class2

1.使用javascript

window.onload=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航