案例1：隔行变色，滑动，点击变色以（选中取消效果）（addClass(),removeClass(),toggleClass()）

Html：
1.隔行变行
    
     
              
       
                    
name
                    
特长
                    
QQ
               
               
                    
eric
                    
擅长java
                    
249056406
               
               
                    
mike
                    
擅长js,css,ps
                    
249056406
               
               
                    
jick
                    
擅长sql,oracle
                    
249056406
               
          
     
Css：table{font-size:12px;border-collapse:collapse;border:1px solid #A9C9E2;}  td,th{padding:5px;border:1px solid #A9C9E2;}  tr{cursor:pointer;}  .tab01{background:#EEFAFF;}  tr.even{background:#F0FBEB;}  tr.highlight,td.highlight,th.highlight{background:#FFFFDD;}  //highlight类供js动态添加  tr.selected{background:#C2ECA7;}（注意：因为tr.even设置了颜色，highlight必须指明tr、td、th，不然tr.even不起效果）js：  $('.tab01 tr:even').addClass('even');            //滑动            $('.tab01 tr:not(:first)').hover(function(){                $(this).addClass('highlight');            }, function(){                $(this).removeClass('highlight');            });            //点击变色            $('.tab01 tr:not(:first)').click(function(){                $(this).toggleClass('selected');            });            //表头滑动            $('.tab01 th').hover(function(){                var colindex = $(this).index();                $('.tab01 td:nth-child(' + (colindex + 1) + '),.tab01 th:nth-child(' + (colindex + 1) + ')').addClass('highlight');  //选中列添加highlight类                        }, function(){                $('.tab01 tr').children().removeClass('highlight');            });

2.如上表格中添加一列按钮，选中行按钮打钩以及行变色（hasClass，removeClass，removeAttr，）

Js：//默认选中的添加样式 $('.tab02 input[type="checkbox"]:checked').parents('tr').addClass('selected');$(".tab02 tr:not(:first)").click(function(){        if($(this).hasClass("selected")){         $(this).removeClass("selected");         $(this).find('input[type="checkbox"]').removeAttr("checked");     }    else{        $(this).addClass("selected");        $(this).find('input[type=checkbox]').attr("checked","checked");    }});