本文实例为大家分享了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 >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/KathyLJQ/article/details/115570940
查看更多关于JavaScript实现鼠标经过表格行给出颜色标识的详细内容...