JS隔行换色和全选的实现
2024-10-08 15:55:13
<!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.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态
*/
function checkAll(){
// 获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
// 获得所有分类项的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0; i < checks.length; i++){
// 修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}
</script>
</head>
<body οnlοad="init()">
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" οnclick="checkAll()" id="check1" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
最新文章
- JS 将数字转化成为货币格式
- session跟cookies区别
- Weblogic常见故障一：JDBC Connection Pools
- Ice_cream’s world III--2122
- Spring实战笔记2---Bean的装配
- R系列：关联分析；某电商平台的数据；做捆绑销售和商品关联推荐
- 解决EditText不能撑满全屏的问题及EditText你应该知道的属性
- SQL Server 中函数的理解总结
- redis的sorted set类型
- Python内置函数(17)——chr
- jquery作业
- javascript面向对象理解的补充
- Codeforces Round #436 C. Bus
- os库新建文件夹
- python中的列表的嵌套与转换
- FFMPEG结构体分析：AVFrame(解码后的数据)
- 可以获取JVM信息的一些管理工具类
- BTM事务配置
- AngularX 指令（ngForof）（转载）
- JComboBox组件的列表实时更新