在网上经常会看到这样长长的表格,当表格过于复杂时难免看花眼,不知道自己看的是哪一行。
而今天咱们就做一个简单的表格单行变色
本人也是一个正在学习的萌新,希望一起共同进步
首先要了解两个简单的事件属性
鼠标经过事件 onmouseover
鼠标离开事件 onmouseout
相当与css里面的:hover 选择器
其次建立一个表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 1000px;
height: 400px;
margin: 200px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr{
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: #A9A9A9 1px solid;
font-size: 12px;
color: blue;
}
tbody td:nth-child(n+3)
{
color:red;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>最新公布值</td>
<td>累计值</td>
<td>前单位值</td>
<td> 净增长率</td>
</tr>
</thead>
<tbody>
<tr>
<td>00356</td>
<td>农业银行3个月定期开放债券</td>
<td>1.026</td>
<td>1.089</td>
<td>1.058</td>
<td>+0.047%</td>
</tr>
<tr>
<td>00356</td>
<td>农业银行3个月定期开放债券</td>
<td>1.026</td>
<td>1.089</td>
<td>1.058</td>
<td>+0.047%</td>
</tr>
<tr>
<td>00356</td>
<td>农业银行3个月定期开放债券</td>
<td>1.026</td>
<td>1.089</td>
<td>1.058</td>
<td>+0.047%</td>
</tr>
<tr>
<td>00356</td>
<td>农业银行3个月定期开放债券</td>
<td>1.026</td>
<td>1.089</td>
<td>1.058</td>
<td>+0.047%</td>
</tr>
<tr>
<td>00356</td>
<td>农业银行3个月定期开放债券</td>
<td>1.026</td>
<td>1.089</td>
<td>1.058</td>
<td>+0.047%</td>
</tr>
<tr>
<td>00356</td>
<td>农业银行3个月定期开放债券</td>
<td>1.026</td>
<td>1.089</td>
<td>1.058</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
</body>
这里为了方便数据什么的都没有过多的改动
下面就是效果图
然后就是关键的JS代码
这里先我们获取元素
var trs=document.querySelector("tbody").querySelectorAll("tr");
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意:querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
然后就是注册事件
//trs 获取的是tr标签元素的集合 我们可以把它看成一个伪数组
//然后利用for循环给他们每个tr注册鼠标经过事件
for(var i=0;i<trs.length;i++)
{
trs[i].onmouseover=function()
{
this.style.backgroundColor='pink';
}
}
//为了让经过后离开又恢复原来的样子,我们需要在用for循环给它们全部注册鼠标离开事件 将它们的背景色改为 无
for(var i=0;i<trs.length;i++)
{
trs[i].onmouseout=function()
{
this.style.backgroundColor='';
}
}