教程集 > jQuery > jquery 教程 > 正文 js鼠标经过表格，行与列变色效果代码

js鼠标经过表格，行与列变色效果代码

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

教程集为您提供js鼠标经过表格，行与列变色效果代码等资源，欢迎您收藏本站，我们将为您提供最新的js鼠标经过表格，行与列变色效果代码资源

一个不错的js鼠标经过表格，行与列变色效果代码，分享给各位同学有需要了解的朋友可参考。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  	<title>利用javascript鼠标经过表格，行与列变色</title>  	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    	<style type="text/css">  	  	</style>  	<script type="text/javascript">  	//<![data[  		window.onload = function(){  			var td = document.getElementById("senfe").getElementsByTagName("td");  				for(var i=0; i<td.length; i  ){  					td[i].onmouseover = function(){  						for(var j=0; j<td.length; j  ){  							if(td[j].cellIndex==this.cellIndex || td[j].parentElement.rowIndex==this.parentElement.rowIndex){  								td[j].style.backgroundColor="#000000";  							}  						}  					}  					td[i].onmouseout = function(){  						for(var j=0; j<td.length; j  ){  							if(td[j].cellIndex==this.cellIndex || td[j].parentElement.rowIndex==this.parentElement.rowIndex){  								td[j].style.backgroundColor="";  							}  						}  					}  				}  		}  	//]]-->  	</script>  </head>  <body>  <table id="senfe" border="0" cellspacing="0" cellpadding="0">  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  	<tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr>  </table>  </body>  </html></td>  	  </tr>  	</table>

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

您可能感兴趣的文章：
js 隔行变色的最简单代码
 javascript实现隔行变色函数代码一例
 js 隔行变色与鼠标悬停自动变色的实现代码
 js 隔行变色鼠标经过变色的代码
 JS控制表格隔行变色的实现代码
 Js实现表格隔行变色，鼠标经过时高亮显示的代码
 js实现表格与div隔行变色的代码
 jQuery 表格隔行换色鼠标高亮行变色的实现代码
 JQuery实现表格隔行换色(隔行变色)效果代码一例
 Js与Css结合实现表格隔行换色(隔行变色)的代码

上一篇：Javascript鼠标移入智能提示浮动层Tips效果下一篇：js图片放大预览鼠标滑过的任意位置

[关闭]

js鼠标经过表格，行与列变色效果代码

最近更新

浏览排行