JavaScript：Jquery 动态隐藏显示列

    
    



    
    

        

            第一列
            第二列
            第三列
            第四列
            第五列

        
    
    


    

        
第一列
        
第二列
        
第三列
        
第四列
        
第五列
    

    
id
id1
id2
id3
id4

    
id
id1
id2
id3
id4

    
id
id1
id2
id3
id4

    
id
id1
id2
id3
id4

    
id
id1
id2
id3
id4

第一页隐藏第二页也隐藏

sh_table	隐藏列表checkbox
hideIndex	保存的隐藏列ID
changecolor	列

var hideIndex = $('#hideIndex' ).val();
if(hideIndex!= null && hideIndex!='' ){
    $( '#sh_table').show();
}else{
    $( '#sh_table').hide();
}
$('#sh_table tr td span').each( function(i) {
    var text = $(this).text();
    $( this).find('input:checkbox' ).click(function(){
        var falg = $(this).attr('checked');
        if (falg =='checked' ||falg==true ) {
            change(1, text);
            var hideIndexVal = $('#hideIndex').val();
            if(hideIndexVal!=null && hideIndexVal!=''){
                var indexArray = hideIndexVal.split("," );
                $.grep(indexArray, function(val,key){
                    if(val==i){
                        indexArray.remove(key);
                    }
                });
            }
            $( '#hideIndex').val(indexArray.toString());
        } else{
            change(0, text);
            var colorArray=new Array();
            var hideIndexVal = $('#hideIndex').val();
            if(hideIndexVal!=null && hideIndexVal!=''){
                colorArray.push(hideIndexVal);
            }
            colorArray.push(i);
            $( '#hideIndex').val(colorArray.toString());
        }
    });
});
      
$('#sh_table tr td span').each( function(i) {
     var text = $(this).text();
//   var hideIndex = $('#hideIndex'). val();
//   var index = hideIndex.split(",");
//  判断服务器返回需要隐藏某些值
     $( this).find('input:checkbox' ).each(function(){
         if(hideIndex.indexOf(i)>=0){
             $( this).removeAttr('checked' );
         };
     });
          
     $( this).find('input:checkbox' ).each(function(){
         var falg = $(this).attr('checked');
         if (falg =='checked' ||falg==true ) {
             change(1, text);
         } else{
             change(0, text);
         };
     });
});



//删除
Array.prototype.remove = function (dx) { 
    if (isNaN(dx) || dx > this.length) { 
        return false ; 
    } 
    for ( var i = 0, n = 0; i < this.length; i++) { 
        if (this [i] != this[dx]) { 
            this[n++] = this [i]; 
        } 
    } 
    this.length -= 1; 
}; 

//隐藏列
function change(reg, text){
     var index;
     $("#changecolor tr").each( function(i){
           if(i==0){
              $( this).find('th' ).each(function(){
                    var text2 = $(this).text();
                    if(text2.indexOf(text)>=0){
                        index = $( this).index();
                   };
              });
          }
           if(reg==0){
              $( this).find("th:eq(" +index+")" ).hide();
              $( this).find("td:eq(" +index+")" ).hide();
          } else if (reg==1){
              $( this).find("th:eq(" +index+")" ).show();
              $( this).find("td:eq(" +index+")" ).show();
          }
          
     });
}