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>
    
  • 相关阅读:
    Manage Spring Boot Logs with Elasticsearch, Logstash and Kibana
    接口服务中的日志
    初识Mybatis框架,实现增删改查等操作
    spring mvc 提交数组等复杂类型
    jquery实现漂亮文件上传表单样式
    spring mvc 接收页面表单List
    无刷新上传图片 可以实时预览 选择图片后即自动上传,没有上传按钮
    cvc-complex-type.2.3: Element 'beans' cannot have character [children] 博客分类: Spring
    Maven+SpringMVC+MyBatis 上传图片
    spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置
  • 原文地址:https://www.cnblogs.com/QLJ1314/p/2623027.html
Copyright © 2011-2022 走看看