JavaScript：Jquery 动态隐藏显示列

复制代码

<html>
<head>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){

            $('#table1 tr td span').each(function() {
                var text = $(this).text();
                $(this).find('input:checkbox').click(function(){
                    var falg = $(this).attr('checked');
                    if (falg =='checked'||falg==true ) {
                        change(0, text);
                    }else{
                        change(1, text);
                    }
                })
            });

        })

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

            })
        }

    </script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="h_lie" id="table1">
    <!--列开始-->
    <tr>
        <td>
            <span><input type="checkbox" class="checkbox_but" />第一列</span>
            <span><input type="checkbox" class="checkbox_but" />第二列</span>
            <span><input type="checkbox" class="checkbox_but" />第三列</span>
            <span><input type="checkbox" class="checkbox_but" />第四列</span>
            <span><input type="checkbox" class="checkbox_but" />第五列</span>

        </td>
    </tr>
    <!--列结束-->
</table>
<table id="table2"  border="1"  cellpadding="0"
       cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;"  >
    <tr >
        <td width="200">第一列</td>
        <td  width="200">第二列</td>
        <td  width="200">第三列</td>
        <td  width="200">第四列</td>
        <td  width="200">第五列</td>
    </tr>

    <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>

    <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>

    <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>

    <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>

    <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
</table>

</body>
</html>

第一页隐藏第二页也隐藏

|-------------|--------------|
| 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();
          }
          
     });
}