JavaScript-表格隔行换色·鼠标上移换色·合并显示

HTML

		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="添加"/> <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>
		</table>

• 隔行换色

<script>
			//页面加载
			window.onload = function(){
			    //获得所有的tr
				var allTr = document.getElementsByTagName("tr");
				for(var i = 2 ; i < allTr.length ; i++){
				    //判断i 是偶数还是奇数
					if(i%2==1){
                        //获得每一行修改颜色
                        allTr[i].style.backgroundColor="pink";
					}

				}
			}
</script>

• 鼠标上移换色

<script>
			//1.页面加载
			window.onload = function(){
			    //2.获得所有的tr
				var allTr = document.getElementsByTagName("tr");
				//3.遍历
				for(var i = 0 ; i < allTr.length ; i++){
				    //移上事件
                    allTr[i].onmouseover = function(){
                        /**
						 * 执行时机问题:
						 * 	window.onload 页面加载完马上执行
						 * 	window.onload 里面的代码 只要onload加载 代码执行完毕
						 * 	for onload的执行的同时 for也执行
						 * 	当for循环执行完毕 i =  6
						 *
						 * 	函数执行时机 调用的时候执行
                         */
                        //调用的时候执行 i 已经变成了6
						//循环走完 i是固定值 所有不能使用i
                        //allTr[i].style.backgroundColor = "pink";
						//this表示当前对象
                        this.style.backgroundColor = "pink";//运行时会切换对象
					}
					//移出事件
                    allTr[i].onmouseout = function(){
						this.style.backgroundColor="#fff";
                    }
				}
			}
		</script>

• 合并

<script>
        var bgColor;
        //页面加载
        window.onload = function(){
            //获得所有的tr
            var allTr = document.getElementsByTagName("tr");
            for(var i = 2 ; i < allTr.length ; i++){
                //判断i 是偶数还是奇数
                if(i%2==1){
                    //获得每一行修改颜色
                    allTr[i].style.backgroundColor="pink";
                }
                //鼠标移上换色
                allTr[i].onmouseover = function(){
                    //获得原来的颜色 记录
                    bgColor = this.style.backgroundColor;
                    //换色
                    this.style.backgroundColor="#997B4B";
                }
                allTr[i].onmouseout = function(){
                    //赋值原来的颜色
                    this.style.backgroundColor=bgColor;
                }

            }
        }
    </script>