表格隔行变色案例
题目分析：
1.页面加载事件，让表格先加载出来，再变色
2.使用document对象中的方法getElementsByTagName(“标签名称”)获取所有的tr对象，返回一个数组
3.遍历存储tr对象的数组，获取每一个tr对象
4.判断tr对象奇偶性
是偶数行：设置tr的背景色为xxx颜色
是奇数行：设置tr的背景色为yyy颜色
另外再实现一个功能：
给当前行添加两个事件(了解)
一个鼠标移入事件:onmouseover,修改当前行的背景色为zzz颜色
一个鼠标移出事件:onmouseout,把当前行的背景色还原
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
<script type="text/javascript">
//1.页面加载事件,让表格先加载出来,在变色
window.onload = function(){
//2.使用document对象中的方法getElementsByTagName("标签名称")获取所有的tr对象,返回一个数组
var trEleArr = document.getElementsByTagName("tr");
//3.遍历存储tr对象的数组,获取每一个tr对象
for(var i=2; i<trEleArr.length; i++){
//4.判断tr对象奇偶性
if(i%2==0){
//是偶数行:设置tr的背景色为xxx颜色
trEleArr[i].bgColor = "pink";
}else{
//是奇数行:设置tr的背景色为yyy颜色
t rEleArr[i].bgColor = "greenyellow";
}
/*
* 给当前行添加两个事件(了解)
* 一个鼠标移入事件:onmouseover,修改当前行的背景色为zzz颜色
* 一个鼠标移出事件:onmouseout,把当前行的背景色还原
*/
//定义一个变量,记录当前行的背景色，当鼠标移出之后，变回原来的背景色
var bg;
trEleArr[i].onmouseover = function(){
bg = this.bgColor;
this.bgColor = "yellow";
}
trEleArr[i].onmouseout = function(){
this.bgColor = bg;
}
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr><tr>
<td><input type="checkbox"></td>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>7</td>
<td>海参制品</td>
<td>海参制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>8</td>
<td>羊绒制品</td>
<td>羊绒制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>9</td>
<td>海洋产品</td>
<td>海洋产品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
知识点：
1、等页面加载完毕，再发生事件。那就是执行响应函数 window.onload = function(){ }
2、使用document对象中的方法getElementsByTagName(“标签名称”)得到存储行号的一个数组
3、遍历数组，按奇偶性分成两类
4、通过table标签的属性：bgcolor修改表格的背景颜色
5、定义一个变量，记录当前行的背景色，当鼠标移出之后，变回原来的背景色