日报62

案例13：表格隔行变色效果
用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
核心思路：鼠标经过 tr 行，当前的行变背景颜色， 鼠标离开去掉当前的背景颜色
注意： 第一行（thead里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行
<head>
<style>
.bg {
background-color: pink;
}
</style>
</head>
<body>
</table>
<script>
// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>

posted @ 2023-04-23 17:50  权衡  阅读(7)  评论(0)    收藏  举报