DOM 案例 表格隔行变色效果
鼠标经过onmouseover
鼠标离开onmouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
/* 一会写CSS样式的时候，注意th,td行，高度宽度和整个table */
/* 的样式，里面的元素文字大小是否居中什么的都要注意到 */
table {
/* 整个表格的整体大小 */
width: 800px;
height: 100px auto;
text-align: center;
border-collapse: collapse;
/* 表格的边框合并为一个边框 */
font-size: 14px;
}
thead tr {
height: 30px;
background-color: aqua;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
/* 鼠标经过时候的样式 */
.bg {
background-color: pink;
}
</style>
<body>
<!-- 先把表格写出来 -->
<table>
<thead class="th">
<!-- 表头部分 -->
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>基金规模</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>乌拉乌1</td>
<td>乌拉乌d</td>
<td>乌拉乌2</td>
<td>乌拉乌3</td>
<td>乌拉乌3</td>
</tr>
<tr>
<td>003526</td>
<td>乌拉乌1</td>
<td>乌拉乌d</td>
<td>乌拉乌2</td>
<td>乌拉乌3</td>
<td>乌拉乌3</td>
</tr>
<tr>
<td>003526</td>
<td>乌拉乌1</td>
<td>乌拉乌d</td>
<td>乌拉乌2</td>
<td>乌拉乌3</td>
<td>乌拉乌3</td>
</tr>
<tr>
<td>003526</td>
<td>乌拉乌1</td>
<td>乌拉乌d</td>
<td>乌拉乌2</td>
<td>乌拉乌3</td>
<td>乌拉乌3</td>
</tr>
</tbody>
</table>
<script>
// 首先获取tbody的元素
var trs = document.querySelector("tbody").querySelectorAll("tr");
// 循环注册绑定事件
for (var i = 0; i < trs.length; i++) {
// 鼠标经过事件 onmouseover
trs[i].onmouseover = function () {
this.className = "bg";
};
//鼠标离开事件 onmouseout
trs[i].onmouseout = function () {
this.className = "";
};
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了