鼠标变色

有一个表格，有一行表头和8行数据，每一行有5列。实现鼠标滑到数据行上改变当前行颜色，移除是变回来。

很好玩的...我们学习一下？。。。。

<title>无标题文档</title>
<script type="text/javascript">
/*有一个表格，有一行表头和8行数据，每一行有5列。实现鼠标滑到数据行上改变当前行颜色，移除是变回来。*/
function changeColor(dom){
 dom.style.backgroundColor = "green";
}
function backColor(dom){
 dom.style.backgroundColor = "#fff";
}
	
</script>
<style type="text/css">
</style>
</head>

<body>
	<table  border="1px solid #000" width = "800px" height = "600px" background = "gray">
	<tr class = "d" width = "600px" height = "80px" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
	    <th colspan="5" >html表格练习</th>
	</tr>
	<!------------------表头------------------------->
	   <tr width = "600px" height = "80px" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
			<th width = "150px">学号</th>
			<th width = "120px">姓名</th>
			<th width = "100px">年龄</th>
			<th width = "50px">性别</th>			
			<th width = "180px">电话</th>
	   </tr>
	   <tr class = "d" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
	        <td>001</td>
			<td>张三</td>
			<td>25</td>
			<td rowspan = "3">男</td>			
			<td align = "right">1526965899</td>
	   </tr>
	   <tr class = "d" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
			<td>002</td>
			<td>李斯</td>
			<td>20</td>						
			<td align = "right">1556965899</td>
	   </tr>
	   <tr class = "d" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
			<td>003</td>
			<td>浊度</td>
			<td>25</td>					
			<td align = "right">1552658985</td>
	   </tr>
	   <tr class = "d" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
			<td>004</td>
			<td>李树</td>
			<td>25</td>
			<td>女</td>			
			<td align = "right">13665965899</td>
	   </tr>
	   <tr class = "d" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
	        <td>005</td>
			<td>赵三</td>
			<td>65</td>
			<td>男</td>			
			<td align = "right">1526965899</td>
	   </tr>
	   <tr class = "d" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
	       <td>006</td>
			<td>张三</td>
			<td>30</td>
			<td>女</td>			
			<td align = "right">1526965899</td>
	   </tr>
	   <tr class = "d" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
	         <td>007</td>
			<td>张启</td>
			<td>35</td>
			<td>男</td>			
			<td align = "right">16395847965</td> 	   
	   </tr>
	   <tr class = "d" onmouseover = "changeColor(this)" onmouseout = "backColor(this)">
	       <td>008</td>
			<td>望值</td>
			<td>28</td>
			<td>女</td>			
			<td align = "right">1526638599</td>
	   </tr>
	
	</table>
	

</body>
</html>

 

posted @ 2012-08-04 16:22  妍珊  阅读(431)  评论(0)    收藏  举报