By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,710 Members | 1,613 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

Show or Hide Columns in a Table

Frinavale
Expert Mod 5K+
P: 9,731
This code snippet is just a little bit of fun.

It demonstrates how you use JavaScript and CSS to show or hide columns in a table depending on whether or not a checkbox corresponding with the column is checked.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function ShowHideField(header, gridID, checkboxElement) {
  5.     var theGrid = document.getElementById(gridID);
  6.     var displayValue;
  7.  
  8.     if (checkboxElement.checked) {
  9.         displayValue = "";
  10.     } else { 
  11.         displayValue = "none";
  12.     }
  13.  
  14.  
  15.     if (theGrid != null) {
  16.         var theHeaders = theGrid.getElementsByTagName("th");
  17.         var theRows = theGrid.getElementsByTagName("tr");
  18.         var numHeaders = theHeaders.length;
  19.         var numRows = theRows.length;
  20.         var i;
  21.         var foundHeader = false;
  22.         //searching through the headers in the grid for one that matches the header value provided
  23.         for (i = 0; i < numHeaders && foundHeader==false; i++) {
  24.             var headerText = theHeaders[i].innerHTML;
  25.             if (headerText == header) {
  26.             //once found the header, set the header's display value to display or not depending on what was provided
  27.                 foundHeader = true;
  28.                 theHeaders[i].style.display = displayValue;
  29.                 var j;
  30.                 for (j = 0; j < numRows; j++) {
  31.                 //looping through all of the rows in the grid and setting each cell in the column to display or not.
  32.                     var cells = theRows[j].getElementsByTagName("td");
  33.                     if (cells.length > i) {
  34.                         cells[i].style.display = displayValue;
  35.                     }                  
  36.                 }
  37.  
  38.             }
  39.         }        
  40.     }
  41.  
  42. }
  43. </script>
  44. </head>
  45.  
  46. <body>
  47. <form>
  48.  
  49.   <input type="checkbox" onclick="ShowHideField('Field 1', 'grid', this)" id="Field1" checked="true" /><label for="Field1">Field 1</label><br />
  50.   <input type="checkbox" onclick="ShowHideField('Field 2', 'grid', this)" id="Field2" checked="true" /><label for="Field2">Field 2</label><br />
  51.   <input type="checkbox" onclick="ShowHideField('Field 3', 'grid', this)" id="Field3" checked="true" /><label for="Field3">Field 3</label><br />
  52.   <input type="checkbox" onclick="ShowHideField('Field 4', 'grid', this)" id="Field4" checked="true" /><label for="Field4">Field 4</label><br />
  53. <br />
  54.  
  55. <table id="grid">
  56.   <tr>
  57.     <th>Field 1</th>
  58.     <th>Field 2</th>
  59.     <th>Field 3</th>
  60.     <th>Field 4</th>
  61.   </tr>
  62.   <tr>
  63.     <td>1,1</td>
  64.     <td>2,1</td>
  65.     <td>3,1</td>
  66.     <td>4,1</td>
  67.   </tr>
  68.   <tr>
  69.     <td>1,2</td>
  70.     <td>2,2</td>
  71.     <td>3,2</td>
  72.     <td>4,2</td>
  73.   </tr>
  74.   <tr>
  75.     <td>1,3</td>
  76.     <td>2,3</td>
  77.     <td>3,3</td>
  78.     <td>4,3</td>
  79.   </tr>
  80. </table>
  81. </form>
  82. </body>
  83.  
  84. </html>
Happy Coding!

-Frinny
Aug 12 '09 #1
Share this Article
Share on Google+