您的位置：首页 > Web前端 > JQuery

jquery实现表现表格隔行换色突出显示

2012-04-08 07:47 483 查看
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery.js" type="text/javascript"></script>

<style type="text/css">

table{height:300px;width:600px;text-align:center;margin-top:50px;}

.color1{background:#6666FF;}

.color2 {background:#66CCFF;}

.heightlight{background:#6699CC;} //选中高亮显示

</style>

<script type="text/javascript">

$(document).ready(function(){

$("#mytable tr:gt(0):odd").addClass("color1"); //奇数行样式

$("#mytable tr:gt(0):even").addClass("color2"); //偶数行样式

$("#mytable tr:gt(0)").mouseover(function(){$(this).addClass("heightlight")}). //当mouserover时添加高亮样式,mouseout时，将高亮样式移除，恢复本来样式。

mouseout(function(){$(this).removeClass("heightlight")});

});

</script>

</head>

<body>

<table cellpadding="0" cellspacing="0" border="1">

<tr>

<td>编号</td><td>姓名</td><td>年龄</td><td>地址</td>

</tr>

<tr>

<td>aa</td>

<td>aa</td>

<td>aa</td>

<td>aa</td>

</tr>

<tr>

<td>aa</td>

<td>aa</td>

<td>aa</td>

<td>aa</td>

</tr>

<tr>

<td>aa</td>

<td>aa</td>

<td>aa</td>

<td>aa</td>

</tr>

<tr>

<td>aa</td>

<td>aa</td>

<td>aa</td>

<td>aa</td>

</tr>

<tr>

<td>aa</td>

<td>aa</td>

<td>aa</td>

<td>aa</td>

</tr>

</table>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航