/特效/表格表单/ 鼠标移动时,表格行和列背景同时变色的一则网页特效代

鼠标移动时,表格行和列背景同时变色的一则网页特效代

表格表单882019-01-22

鼠标移动时,表格行和列背景同时变色的一则网页特效代

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>curColRowHighlight</title>
	</head>
	<body>
		<table id="tb1" width="100%" border="1" cellspacing="0" cellpadding="0">
			<tr><td> </td><td> </td><td> </td><td> </td></tr>
			<tr><td> </td><td> </td><td> </td><td> </td></tr>
			<tr><td> </td><td> </td><td> </td><td> </td></tr>
			<tr><td> </td><td> </td><td> </td><td> </td></tr>
			<tr><td> </td><td> </td><td> </td><td> </td></tr>
			<tr><td> </td><td> </td><td> </td><td> </td></tr>
			<tr><td> </td><td> </td><td> </td><td> </td></tr>
		</table>
	</body>
<script>
	var tb=document.getElementById("tb1");
	var tbtr=tb.getElementsByTagName("tr");
	var tbtd=tb.getElementsByTagName("td");
	var tbrows=tbtr.length;
	var tbcols=tbtr[0].getElementsByTagName("td").length;
	var tbtds=tb.getElementsByTagName("td").length;
	for(var i=0;i<tbrows;i++){
		for(var j=0;j<tbcols;j++){
			tbtd[(i*tbcols)+j].row=i;
			tbtd[(i*tbcols)+j].col=j;
			tbtd[(i*tbcols)+j].innerHTML=i+""+j;
			tbtd[(i*tbcols)+j].onmouseover=function(){
				for(var k=0;k<tbtds;k++){
					if(tbtd[k].row==this.row||tbtd[k].col==this.col){tbtd[k].style.background="#333";tbtd[k].style.color="#fff";}
				}
			}
			tbtd[(i*tbcols)+j].onmouseout=function(){
				for(var k=0;k<tbtds;k++){
					if(tbtd[k].row==this.row||tbtd[k].col==this.col){tbtd[k].style.background="";tbtd[k].style.color="";}
				}
			}
		}
	}
</script>

</html>


演示下载

查看演示

标签: 表格表单 

有什么新鲜事想告诉大家?

发表