教程集 > jQuery > jquery 教程 > 正文 JS表格变色点击行颜色改变

JS表格变色点击行颜色改变

发布时间：2023-12-19 编辑：jiaochengji.com

教程集为您提供JS表格变色点击行颜色改变等资源，欢迎您收藏本站，我们将为您提供最新的JS表格变色点击行颜色改变资源

我们有时会看到很多应用中当你点击一行时这一行的表格就会变色了，下面我来给大家演示一个JS表格变色点击行颜色改变方法，有需要了解的朋友可参考。

提示：您可以先修改部分代码再运行

<html>       <head>       <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">       <title>table</title>       <style>       table {     	  border-top:1px   solid   black;     	  border-left:1px   solid   black;     	  cursor:default;       }       td {     	  border-bottom:1px   solid   black;     	  border-right:1px   solid   black;     	  height:23px;       }       </style>     </head>             <body>       <table   id="table1"   width="50%"   border="0"   cellpadding="0"   cellspacing="0">           <tr   style="background-color:#999999;   border-bottom:2px   solid   black;   height:25px"   align="center">               <td   width="25%">one</td>               <td   width="25%">two</td>               <td   width="25%">three</td>               <td   width="25%">four</td>           </tr>           <tr   onmouseover="over()"   onclick="change()"   onmouseout="out()">               <td>管理员1</td>               <td>管理员1</td>               <td>管理员1</td>               <td>管理员1</td>           </tr>           <tr   onmouseover="over()"   onclick="change()"   onmouseout="out()">               <td>管理员2</td>               <td> </td>               <td> </td>               <td> </td>           </tr>           <tr   onmouseover="over()"   onclick="change()"   onmouseout="out()">               <td> </td>               <td> </td>               <td> </td>               <td> </td>           </tr>           <tr   onmouseover="over()"   onclick="change()"   onmouseout="out()">               <td> </td>               <td> </td>               <td> </td>               <td> </td>           </tr>           <tr   onmouseover="over()"   onclick="change()"   onmouseout="out()">               <td> </td>               <td> </td>               <td> </td>               <td> </td>           </tr>           <tr   onmouseover="over()"   onclick="change()"   onmouseout="out()">               <td> </td>               <td> </td>               <td> </td>               <td> </td>           </tr>           <tr   onmouseover="over()"   onclick="change()"   onmouseout="out()">               <td> </td>               <td> </td>               <td> </td>               <td> </td>           </tr>                   </table>    <script language="JavaScript">         //鼠标点击选择行时候变色  	function change(change) {  		var oObj = window.event.srcElement;  		//alert(change.tagName.toLowerCase());  		if(oObj.tagName.toLowerCase() == "td"){     			var oTr = oObj.parentNode;     			for(var i=1; i<document.all.table1.rows.length; i  )   {     				document.all.table1.rows[i].style.backgroundColor   =   "";     				document.all.table1.rows[i].tag = false;     			}  			oTr.style.backgroundColor = "#CCCCFF";     			oTr.tag = true;     		}  	}      //鼠标点击另外一行时关闭已选行变色  	function out() {  		var oObj = event.srcElement;  		if(oObj.tagName.toLowerCase() == "td"){  			var oTr = oObj.parentNode;  			if(!oTr.tag) oTr.style.backgroundColor = "";  		}  	}  	//鼠标移动到选择行上时的行变色  	function over(){     		var oObj = event.srcElement;  		if(oObj.tagName.toLowerCase() == "td"){     		var oTr = oObj.parentNode;  		if(!oTr.tag) oTr.style.backgroundColor = "#E1E9FD";  		}  	}   </script>    </body>       </html></td>  	  </tr>  	</table>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
Illustrator如何调渐变颜色调渐变颜色方法分享
 js 隔行变色与鼠标悬停自动变色的实现代码
 Illustrator调渐变颜色方法分享
 Photoshop三种UI的选择配色方法分享
 js网页调色板代码
 Photoshop改变字体颜色方法分享
 js背景不停变化代码-QQ空间代码
 javascript实现隔行变色函数代码一例
 自动改变文字大小和颜色的js代码分享
 jQuery 行背景颜色的交替显示(隔行变色)实现代码

上一篇：js 搜索文本框鼠标选中后提示消失代码下一篇：状态栏文字不停闪烁

[关闭]

JS表格变色点击行颜色改变

最近更新

浏览排行