jQuery展示表格点击变色、全选、删除怎么实现

  

  

  

  

  body{font-size:12px}

  table{width:360px;border-collapse:collapse}

  table tr th,td{border:solid 1px #666;text-align:center}

  table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:pointer}

  table tr td span{float:left;padding-left:12px}

  table tr th{background-color:#ccc;height:32px;background-color:#fff}

  .clsImg{position:absolute;border:solid 1px #ccc;padding:3px;background-color:#eee;display:none;cursor:pointer}

  .btn{border:solid 1px #666;padding:2px;width:50px;filter:progd:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);cursor:pointer}

  $(function(){

    //点击表格行变色

    $('tr').click(function(){

      if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){

        this.style.cssText='background-color:#CCC';

      }else{

        this.style.cssText='background-color:#fff';

      }

    })

 

    //放大图显示

    $('.a').mousemove(function(e){

      $('#imgTip').show().attr('src',this.src);

      $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});

    });

    $('.a').mouseover(function(e){

      $('#imgTip').show().attr('src',this.src);

      $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});

    });

    $('.a').mouseout(function(){

      $('#imgTip').hide();

    });

 

    //点击全选

    $('#checkAll').click(function(){

      if(this.checked){

        $(':checkbox').attr('checked',true);

      }else{

        $(':checkbox').attr('checked',false);

      }

    });

 

    //删除部分与全部

    $('.btn').click(function(){

      if($('#checkAll').attr('checked')){

        $('table tr td :checkbox:not("#checkAll")').each(function(index){

          $('#'+this.value).remove();

        });

      }else{

        $(':checkbox:not("#checkAll")').each(function(index){

          if(this.checked){

            $('#'+this.value).remove();

          }

        })

      }

    });

  });