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>

ID	Name	Address	Gender
aaaa	aaaa	aaaa	aaaa
aaaa	aaaa	aaaa	aaaa
aaaa	aaaa	aaaa	aaaa
aaaa	aaaa	aaaa	aaaa
aaaa	aaaa	aaaa	aaaa
aaaa	aaaa	aaaa	aaaa

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

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