js——3表格隔行换色，全选和全不选，onload事件，循环遍历checkbox

0细节知识点--onload事件,遍历表格每一行

1表格隔行换色

2表格全选和全不选

---

 

0细节知识点

• onload事件：

　　onload 事件会在页面或图像加载完成后立即发生。

　　onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码

• 可以直接得到返回表格的每一行，返回的是一个数组

　　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表格隔行换色

    
        
        
        
        
    
    
        

            

                

                    
                
                
分类ID
                
分类名称
                
分类商品
                
分类描述
                
操作
            
            

                

                    
                
                
1
                
手机数码
                
华为,小米,尼康
                
黑马数码产品质量最好
                

                    修改|删除
                
            
            

                

                    
                
                
2
                
文具
                
铅笔，橡皮
                
买买买
                
修改|删除
            
            

                

                    
                
                
3
                
电脑办公
                
联想,小米
                
笔记本特卖
                
修改|删除
            
            

                

                    
                
                
4
                
馋嘴零食
                
辣条,麻花,黄瓜
                
年货
                
修改|删除
            
            

                

                    
                
                
5
                
床上用品
                
床单,被套,四件套
                
都是套子
                
修改|删除
            
        
    

 

---

 

2表格全选和全不选

（1）细节提取：对多个checkbox进行相同的命名，然后通过相同的名字来进行统一操作的处理 　　

　　

　　var checks = document.getElementsByName("checkone");

　　//上句也可替换如下：

　　var checks = document.getElementsByTagName("input");

（案例）

    
        
        
        
        
    
    
        

            

                

                    
                
                
分类ID
                
分类名称
                
分类商品
                
分类描述
                
操作
            
            

                

                    
                
                
1
                
手机数码
                
华为,小米,尼康
                
黑马数码产品质量最好
                

                    修改|删除
                
            
            

                

                    
                
                
2
                
学习用品
                
铅笔，橡皮
                
买买买
                
修改|删除
            
            

                

                    
                
                
3
                
电脑办公
                
联想,小米
                
笔记本特卖
                
修改|删除
            
            

                

                    
                
                
4
                
馋嘴零食
                
辣条,麻花,黄瓜
                
年货
                
修改|删除
            
            

                

                    
                
                
5
                
床上用品
                
床单,被套,四件套
                
都是套子
                
修改|删除