JQ——选择器的应用（表格的隔行换色、全选和全不选）

1、表格的隔行换色：

（1）核心代码：

    <script>
            $(function(){
                $("tbody tr:even").css("background-color","red");
                $("tbody tr:odd").css("background-color","yellowgreen");
            });
    script>

获取tbody中的元素，并对奇数行和偶数行分别设置不同的颜色。

（2）效果展示：

 

 2、全选和全不选：

（1）核心代码：

        <script>
            $(function(){
                $("#select").click(function(){
                $("tbody input").attr("checked",this.checked);
                });
            });
        script>

用到了选择器和对属性的设置，使得下面的复选框与第一个保持一致。

（2）效果演示：

 

 3、完整代码：

（1）隔行换色：

        
        
        
		
    

    
        

            
成绩登记表
        

            

				
序号
              
				
学号
				
姓名
				
平时成绩
				
期末成绩
				
学期总成绩
            
        
        

			

				
1
				
20100300201
				
张小丽
				
95
				
95
				
95
			

			

				
2
				
20100300202
				
李宁
				
90
				
88
				
89
			

			

				
3
				
20100300203
				
刘梅
				
98
				
92
				
95
			

			

				
4
				
20100300204
				
王刚
				
98
				
90
				
94
			

			

				
5
				
20100300205
				
郑军
				
90
				
85
				
87
			

			

				
6
				
20100300206
				
杨波
				
80
				
80
				
80
			
	    
        

（2）全选和全不选：

    
        
        
        
		
    

    
        

            
成绩登记表
            

            	

				
序号
              
				
学号
				
姓名
				
平时成绩
				
期末成绩
				
学期总成绩
            
            
			

				

				
1
				
20100300201
				
张小丽
				
95
				
95
				
95
			

			

				

				
2
				
20100300202
				
李宁
				
90
				
88
				
89
			

			

				

				
3
				
20100300203
				
刘梅
				
98
				
92
				
95
			

			

				

				
4
				
20100300204
				
王刚
				
98
				
90
				
94
			

			

				

				
5
				
20100300205
				
郑军
				
90
				
85
				
87
			

			

				

				
6
				
20100300206
				
杨波
				
80
				
80
				
80