zoukankan      html  css  js  c++  java
  • 鼠标变色

    有一个表格,有一行表头和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>
    
  • 相关阅读:
    iaas,paas,saas理解
    July 06th. 2018, Week 27th. Friday
    July 05th. 2018, Week 27th. Thursday
    July 04th. 2018, Week 27th. Wednesday
    July 03rd. 2018, Week 27th. Tuesday
    July 02nd. 2018, Week 27th. Monday
    July 01st. 2018, Week 27th. Sunday
    June 30th. 2018, Week 26th. Saturday
    June 29th. 2018, Week 26th. Friday
    June 28th. 2018, Week 26th. Thursday
  • 原文地址:https://www.cnblogs.com/QLJ1314/p/2623027.html
Copyright © 2011-2022 走看看