当先锋百科网

首页 1 2 3 4 5 6 7

Dom为表格添加隔行换色 鼠标经过每行变色 隔行换色

1.首先创建一个表格并给表格添加样式
2.在页面添加加载事件
window.function(){}
3.查找元素table，用for循环遍历，然后对2取余 实现隔行换色
var otb=document.getElementById(‘tb’).children;
var nond;//改变之前的样式
for(i=0;i<otb.length;i++){
//隔行换色
//对2取余
if(i%2!=0){
otb[i].className=‘one’;
}
//添加样式
otb[i].οnmοuseοver=function(){
nond=this.className;
this.className=‘two’;
}
//离开之后的样式
otb[i].οnmοuseοut=function(){
this.className=nond;
}
}
4.js代码如下

<script type="text/javascript">
		//页面加载事件
		window.function(){
			//查找元素table
		    var otb=document.getElementById('tb').children;
            var nond;//改变之前的样式
			for(i=0;i<otb.length;i++){
				//隔行换色
				if(i%2!=0){
					otb[i].className='one';
				}
				//添加样式
				otb[i].onmouseover=function(){
					nond=this.className;
					this.className='two';
				}
				//离开之后的样式
				otb[i].onmouseout=function(){
					this.className=nond;
				}
			}
		}
		// getst();
	</script>

整体代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>隔行换色</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
		th,td{border: 1px solid gray;text-align: center;line-height: 35px;}
		.one{background:blue;}
		.two{background: yellow;}
	</style>
	<script type="text/javascript">
		//页面加载事件
		window.function(){
			//查找元素table
		    var otb=document.getElementById('tb').children;
            var nond;//改变之前的样式
			for(i=0;i<otb.length;i++){
				//隔行换色
				if(i%2!=0){
					otb[i].className='one';
				}
				//添加样式
				otb[i].onmouseover=function(){
					nond=this.className;
					this.className='two';
				}
				//离开之后的样式
				otb[i].onmouseout=function(){
					this.className=nond;
				}
			}
		}
		// getst();
	</script>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Address</th>
				<th>Gender</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
				<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
		</tbody>
	</table>
</body>
</html>
隔行换色 
<script type="text/javascript">
	//页面加载事件
	window.function(){
		//查找元素table
	    var otb=document.getElementById('tb').children;
        var nond;//改变之前的样式
		for(i=0;i<otb.length;i++){
			//隔行换色
			if(i%2!=0){
				otb[i].className='one';
			}
			//添加样式
			otb[i].onmouseover=function(){
				nond=this.className;
				this.className='two';
			}
			//离开之后的样式
			otb[i].onmouseout=function(){
				this.className=nond;
			}
		}
	}
	// getst();
</script>
IDNameAddressGender
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa