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

最新推荐文章于 2021-07-11 21:34:52 发布

weixin_44483970

最新推荐文章于 2021-07-11 21:34:52 发布

阅读量170

点赞数 1

本文链接：https://blog.csdn.net/weixin_44483970/article/details/86632353

版权

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

weixin_44483970

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dom为表格添加隔行换色鼠标经过每行变色

1.首先创建一个表格并给表格添加样式2.在页面添加加载事件window.function(){}3.查找元素table，用for循环遍历，然后对2取余实现隔行换色var otb=document.getElementById(‘tb’).children;var nond;//改变之前的样式for(i=0;i&amp;amp;amp;lt;otb.length;i++){//隔行换色//对2取余if(...
复制链接

扫一扫