利用javascript鼠标经过表格，行与列变色 -- [表格特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

利用javascript鼠标经过表格，行与列变色

深山行者个人网站 2010/9/3 14:56:45 深山行者字体:大中小浏览 9704

以下为详细代码

<!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" />
	<meta name="author" content="盛飞(SenFe), www.senfe.com, SenFe@126.com" />
	<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>

前一页:javascript表格内移动上下列，可以做成ajax加上动态程序做成上下移动顺序

后一页:针对table,div隔行变色的JS方法