• 鼠标变色


    有一个表格,有一行表头和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>
    
  • 相关阅读:
    走进JavaWeb技术世界8:浅析Tomcat9请求处理流程与启动部署过程
    走进JavaWeb技术世界7:Tomcat和其他WEB容器的区别
    走进JavaWeb技术世界6:Tomcat5总体架构剖析
    走进JavaWeb技术世界5:初探Tomcat的HTTP请求过程
    走进JavaWeb技术世界4:Servlet 工作原理详解
    走进JavaWeb技术世界3:JDBC的进化与连接池技术
    [转]115个Java面试题和答案——终极列表(下)
    [转]115个Java面试题和答案——终极列表(上)
    [转]Spring MVC 4常用的那些注解
    [转]spring4.x注解概述
  • 原文地址:https://www.cnblogs.com/QLJ1314/p/2623027.html
Copyright © 2020-2023  润新知