首页 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>

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为表格添加隔行换色鼠标经过每行变色隔行换色