学习DOM的第二天练习案例：表格隔行变色表格的全选与取消全选

1.表格的隔行变色

鼠标划入与划出。划入变色className='bg'，划出className=' ' ；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{border-collapse: collapse;}thead tr td{background-color: cadetblue;border: 1px solid rgb(177, 70, 70);}tbody tr td{border: 1px solid rgb(177, 70, 70);}.bg{background-color: brown;}</style>
</head>
<body><table><thead><tr><td>代码</td><td>名称</td><td>公布净值</td><td>累计净值</td><td>前单位净值</td></tr></thead><tbody><tr><td>0001</td><td>农行定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td></tr><tr><td>0002</td><td>广东理财30天债券</td><td>0.903</td><td>3.386</td><td>0.000</td></tr><tr><td>0003</td><td>兴全合宜混合A</td><td>0.860</td><td>0.860</td><td>0.863</td></tr><tr><td>0004</td><td>中银证券债券A</td><td>1.034</td><td>1.088</td><td>1.034</td></tr><tr><td>0005</td><td>光大添天盈月债券B</td><td>0.950</td><td>3.557</td><td>0.000</td></tr></tbody></table><script>var trs=document.querySelectorAll('tr');for(var i=0;i<trs.length;i++){trs[i].onmouseover=function(){//    console.log(11);this.className='bg';}trs[i].onmouseout=function(){this.className='';}}</script>
</body>
</html>

2.表格的全选与取消全选

分为一个总控制开关和分路开关。当总开关打开时分路开关全部打开，一个循环所有 j_tbs[i].checked=this.checked; 分开关全部打开时总开关亮起，所以每打开一个分开关，遍历判断是否所有的分开关都亮起，如果是就打开总开关。不理解的可以评论区提问哦。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{display: flex;justify-content: center;}table{border-collapse: collapse;}thead tr th{background-color:darkorange;border: 1px solid rgb(177, 70, 70);}tbody tr td{border: 1px solid rgb(177, 70, 70);}
</style>
</head>
<body><div class="wrap"><table><thead><tr><th><input type="checkbox" id ="j_cbAll"></th><th>商品</th><th>价格</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPhone9</td><td>10000</td></tr><tr><td><input type="checkbox" /></td><td>iPhone10</td><td>2000</td></tr></tbody></table></div><script>var j_cbAll = document.getElementById('j_cbAll'); //全选按钮var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');j_cbAll.onclick = function(){for(var i=0;i<j_tbs.length;i++){j_tbs[i].checked=this.checked; }}//下面复选按钮全选中，上面被按for(var i=0;i<j_tbs.length;i++){j_tbs[i].onclick = function(){var flag=true;for(var j=0;j<j_tbs.length;j++){if(!j_tbs[j].checked){flag=false;console.log(flag);}}j_cbAll.checked=flag;}}</script>
</body>
</html>

学习DOM的第二天练习案例：表格隔行变色表格的全选与取消全选相关推荐

本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色构建界面界面HTML代码 <style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border ...
Layui数据表格隔行变色的两种方法
开发工具与关键技术:MVC 作者:Mr_恺撰写时间:2019年7月17日 Layui数据表格隔行变色,第一种的就是layui插件里有一个自带的方法: even这个属性把它设置为:true,就开启 ...
表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
onmouseover+onmouseout ：表格隔行变色
表格隔行变色 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
前端-table表格隔行变色
table表格隔行变色作为一个后端的我,在某公司无前端工程师时,系统那体验自己用起来都想骂人了.今天就纪录一下,自己在后台经常用到的一个小玩意. :nth-child(): 定义和用法 :nth-c ...

学习DOM的第二天练习案例：表格隔行变色表格的全选与取消全选

学习DOM的第二天练习案例：表格隔行变色表格的全选与取消全选相关推荐

最新文章

热门文章

学习DOM的第二天 练习案例：表格隔行变色 表格的全选与取消全选

学习DOM的第二天 练习案例：表格隔行变色 表格的全选与取消全选相关推荐

最新文章

热门文章

学习DOM的第二天练习案例：表格隔行变色表格的全选与取消全选

学习DOM的第二天练习案例：表格隔行变色表格的全选与取消全选相关推荐