1. 确定事件: 文档加载完成 onload
2. 事件要触发函数: init()
3. 函数:操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
01表格隔行换色.html [标题行不换色]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01表格隔行换色</title>
<script>
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//遍历所有的行,然后根据奇数 偶数,使行得到不同颜色
//标题行不换色
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red";
}
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</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>日常家用</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>美酒美食</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>什么样的衣服都有</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>美妆卖场</td>
<td>美妆</td>
<td>各式各样的美妆产品</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
02表格隔行换色.html [标题行换色]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02表格隔行换色</title>
<script>
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//遍历所有的行,然后根据奇数 偶数,使行得到不同颜色
//标题行换色
for(var i=0; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red";
}
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</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>日常家用</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>美酒美食</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>什么样的衣服都有</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>美妆卖场</td>
<td>美妆</td>
<td>各式各样的美妆产品</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>