<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格隔行变色</title>
</head>
<body>
<table border="1px " width='300px' id='tab'>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>12</td>
<td>女</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>小花</td>
<td>12</td>
<td>男</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>小红</td>
<td>12</td>
<td>女</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
let tab= document.getElementById('tab')
//获取第0个tbody里面的行
let rows=tab.tBodies[0].rows;
//储存原来的颜色
let bgcolor=''
for(let i=0;i<rows.length;i++){
if(i%2==0){
rows[i].style.background='red'
}
rows[i].οnmοuseοver=function(){
bgcolor=this.style.background;
this.style.background='pink'
}
rows[i].οnmοuseοut=function(){
//移除颜色恢复
this.style.background=bgcolor
}
}
</script>
1467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
