<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1.确定事件：文档加载完成onload
2.事件要触发函数：init()
3.函数：操作页面的元素
要操作表格中的每一行
动态的修改行的背景颜色
-->
<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"
}
}
}
/*
全选和全不选步骤分析：
1.确定事件：onclik单击事件
2.事件触发函数：checkAll()
3.函数要去做一些事情：
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态
*/
function checkAll(){
var check1=document.getElementById("check1")
var check2=document.getElementsByName("checkone")
var checked=check1.checked
var checks=document.getElementsByTagName("input")
for(var i=1;i<checks.length;i++){
var checkone=checks[i]
checkone.checked=checked
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="50%" height="40%" id="tab">
<tr>
<td>
<input type="checkbox" onclick="checkAll()" id="check1"/>
</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>五年单身3年是狗</td>
<td>哈哈哈哈</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
表格隔行换色
猜你喜欢
转载自blog.csdn.net/abc1498880402/article/details/82936288
今日推荐
周排行