本文实例为大家分享了javascript实现鼠标经过表格行给出颜色标识，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html lang
本文实例为大家分享了javascript实现鼠标经过表格行给出颜色标识，供大家参考，具体内容如下
代码：
<!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>
<style>
* {
margin: 0;
padding: 0;
}
table {
margin: 100px auto;
width: 800px;
border-spacing: 0;
text-align: center;
}
table tr:nth-child(1) {
background-color: rgb(135, 206, 235);
}
table tr:nth-child(n+2) {
border-bottom: 1px solid black;
}
th {
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
}
td {
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px;
color: blue;
border-bottom: 1px solid lightgray;
}
</style>
</head>
<body>
<table>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</table>
<script>
var rows = document.querySelectorAll(' table tr:nth-child(n+2)');
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.style.backgroundColor = "lightblue";
}
rows[i].onmouseout = function() {
this.style.backgroundColor = "";
}
}
</script>
</body>
</html>--结束END--
本文标题: JavaScript实现鼠标经过表格行给出颜色标识
本文链接: https://lsjlt.com/news/123314.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0