Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts

    Hide / Unhide table columns

    I use this to hide table columns when not needed like before printing tables.
    The + character in the header columns is displayed to indicate that there is a hidden column.

    All I do is to wrap the innerHTML of the cells by +<!-- A@
    and B@ --> so the original header cell contents is treated as comment now only displaying +.
    For data cell the comment starts with &nbsp;<!-- A@ to
    only dislay a blank and hide the rest.



    Code:
    <html>
    <body>
    <table id=t >
        <tr><th onclick="show(0,'t');">1</th><th onclick="show(1,'t');">2<br>2</th><th>3</th><th onclick="show(3,'t');">4</th></TR>
        <tr><td>a</td><td>111111</td><td>b</td><td></td></TR>
        <tr><td></td><td>2222222</td><td>c</td><td></td></TR>
        <tr><td></td><td>3333333333</td><td></td><td></td></TR>
        <tr><td></td><td>444</td><td></td><td>e</td></TR>
        </table>
    <script>
        function show(ci,id){
        /////////////////////   
            var obj=document.getElementById(id);
            var i,arr=[],n=obj.rows.length;               
            arr=obj.rows[0].cells[ci].innerHTML.split('+<!-- A@');
            if(arr.length===2){ // cells are hidden
                arr=arr[1].split('B@ -->');  
                obj.rows[0].cells[ci].innerHTML=arr[0];
                for(i=1;i<n;i++){               
                    arr=obj.rows[i].cells[ci].innerHTML.split('<!-- A@');
                    arr=arr[1].split('B@ -->');  
                    obj.rows[i].cells[ci].innerHTML=arr[0];
                }    
            }  else { // hide cells
                obj.rows[0].cells[ci].innerHTML='+<!-- A@'+ obj.rows[0].cells[ci].innerHTML+'B@ -->';
                for(i=1;i<n;i++){    
                    obj.rows[i].cells[ci].innerHTML='&nbsp;<!-- A@'+ obj.rows[i].cells[ci].innerHTML+'B@ -->';
                }            
            } 
        }
    </script>
    </body>
    </html>
    Some more code for other things can be found at :http://www.hgsweb.de

  2. Users who have thanked hgs for this post:

    sunfighter (11-01-2011)


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •