How to show/hide Grid columns on the fly?

The solution is simple, but quite elaborate to make it work. Here's the complete example using JQuery. You can customize your own way.

First, reference JQuery and create the dynamic list of column names. Then design a checkbox accordingly and hook up onclick event for each:
  
   <script type="text/javascript" src="JS/jquery-1.3.js"></script>  
   <script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#tblExample th").each(function() {
            var iIndex = $(this).closest("th").prevAll("th").length;
            var colName = $(this).html();
           
            $("#divColumns")
                .append(
                    $(document.createElement("input")).attr({
                         id:    iIndex
                        ,name:    iIndex
                        ,value:    colName
                        ,type:    'checkbox'
                        ,checked:true
                    })
                    .click( function( event )
                    {
                        var cbox = $(this)[0];
                        ShowHideColumn(cbox.id, !cbox.checked);
                    } )
                )
                .append(
                    $(document.createElement('label')).attr({
                        'for':    iIndex
                    })
                    .text( colName )
                ).
                append("&nbsp;&nbsp;&nbsp;");
        });

        $("#tblExample th").click(function() {
           var iIndex = $(this).closest("th").prevAll("th").length;
           ShowHideColumn(iIndex, true);
        });
       
        function ShowHideColumn(iIndex, isHide)
        {
           try{
               var display = "table-cell";
               if(isHide == true) display = "none";
              
               $("#tblExample").find("tr").each(function() {
                  $(this).find("td:eq(" + iIndex + ")").css("display", display);
                  $(this).find("th:eq(" + iIndex + ")").css("display", display);
               });
           }
           catch(e) { alert(e);}
        }
       
        $("#tblExample th").mouseover(function() {
            $(this).css('cursor','pointer');
        });
    });
    </script>

And here is the implementation of HTML markups in body section:
        <div id="divColumns">
        Put a yes/no check on each column name below to show/hide column correspondingly:<br />
        </div>
        <br />
        Or you can click on header to hide the column at once:<br />
        <table id="tblExample" cellpadding="0" cellspacing="0" border="1" style="border:solid 1px gray;">
            <thead>
                <tr style="background-color:Gray;">
                    <th>ID</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>0001</td><td>Henry</td><td>35</td></tr>
                <tr><td>0002</td><td>Lucky Luke</td><td>33</td></tr>
                <tr><td>0003</td><td>Winly</td><td>30</td></tr>
            </tbody>
        </table>

RESULTS:

 

 Try to uncheck the "Age" checkbox and see how it works. Here's the result:

Happy coding,