JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示
Posted 人间烟火地三鲜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示相关的知识，希望对你有一定的参考价值。
思路：
1、获取所有行对象，将需要间隔颜色显示的行对象进行动态的className属性指定；
前提是：先定义好类选择器，就是说给行对象赋予name.
2、高亮用到两个事件：onmouseover（鼠标进入事件）、onmouseout（鼠标移
出事件）
3、为了方便可以在遍历行对象时将每一个行对象都进行两个事件属性的制度，并通
过匿名函数完成该事件的处理；
4、高亮的原理：将鼠标进入时颜色改变，改变前先记录下原行对象的样式，在鼠标
离开时，将该样式还原；
5、改样式需要在页面加载完成后直接显示，所以使用window.onload事件完成指定。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表格颜色间隔显示，鼠标停留行高亮显示</title>
<style type="text/css">
table{
border:#1A34E8 1px solid;
width:300px;
}
table td{
border:#CB7C0A 1px solid;
text-align: center;
width: 100px;
}
table th{
border:#CB7C0A 1px solid;
text-align: center;
width: 100px;
}
.one{
}
.two{
}
.over{/*高亮颜色*/
}
</style>
<script type="text/javascript">
/*行颜色间隔显示*/
function trcolor(){
var tabNode = document.getElementsByTagName("table")[0];
var trs = tabNode.rows;
for(var i=0; i<trs.length; i++){
if(i%2 == 1)
/*定义奇数行颜色:把类名one赋给奇数行*/
trs[i].className = "one";
else
/*定义偶数行颜色:把类名two赋给偶数行*/
trs[i].className = "two";
/*鼠标进入行颜色高亮显示*/
var name;//用来记录行原来的颜色
/*动态添加事件*/
trs[i].onmouseover = function(){
name = this.className;//记录下行原来的颜色
this.className = "over";
};
trs[i].onmouseout = function(){
this.className = name;
}
}
}
// /*鼠标进入高亮显示*/
// var name;//用来记录行原来的颜色
// function over(trNode){
// name = trNode.className;//记录下行原来的颜色
// trNode.className = "over";
// }
// /*鼠标移出恢复 */
// function out(trNode){
// trNode.className = name;//恢复原来的颜色
// }
/*窗口加载时就执行trcolor函数*/
window.onload = trcolor;
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>邯郸市</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>石家庄市</td>
</tr>
<tr>
<td>王五</td>
<td>18</td>
<td>邢台市</td>
</tr>
<tr>
<td>赵六</td>
<td>20</td>
<td>唐山市</td>
</tr>
<tr>
<td>周八</td>
<td>22</td>
<td>衡水市</td>
</tr>
<tr>
<td>田七</td>
<td>19</td>
<td>沧州市</td>
</tr>
<tr>
<td>王二小</td>
<td>19</td>
<td>保定市</td>
</tr>
</table>
</body>
</html>
以上是关于JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示的主要内容，如果未能解决你的问题，请参考以下文章