• 鼠标变色


    有一个表格,有一行表头和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>
    
  • 相关阅读:
    深入理解link和@import到底有什么区别?
    你应该知道的简单易用的CSS技巧
    META标签的设置
    前端webp图片
    PAT 1130 Infix Expression[难][dfs]
    PAT 1118 Birds in Forest [一般]
    生信-cufflinks输入输出文件分析
    PAT 1121 Damn Single[简单]
    PAT 1049 Counting Ones [难]
    NGS中的一些软件功能介绍
  • 原文地址:https://www.cnblogs.com/QLJ1314/p/2623027.html
Copyright © 2020-2023  润新知