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為表格添加隔行換色滑鼠經過每行變色