Hide Show Column in an HTML Table

Question

I have an HTML table with several columns and I need to implement a column chooser using jquery   When a user clicks on a checkbox I want to hide show the corresponding column in the table   I would like to do this without attaching a class to every td in the table  is there a way to select an entire column using jquery   Below is an example of the HTML    lt table gt       lt thead gt           lt tr gt  lt th class  col1  gt Header 1 lt  th gt  lt th class  col2  gt Header 2 lt  th gt  lt th class  col3  gt Header 3 lt  th gt  lt  tr gt       lt  thead gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    lt form gt       lt input type  checkbox  name  col1  checked  checked    gt  Hide Show Column 1  lt br   gt       lt input type  checkbox  name  col2  checked  checked    gt  Hide Show Column 2  lt br   gt       lt input type  checkbox  name  col3  checked  checked    gt  Hide Show Column 3  lt br   gt   lt  form gt

User · Answer

Here s a little more fully featured answer that provides some user interaction on a per column basis   If this is going to be a dynamic experience  there needs to be a clickable toggle on each column that indicates the ability to hide the column  and then a way to restore previously hidden columns     That would look something like this in JavaScript       hide-column   click function e     var  btn     this     var  cell    btn closest  th td     var  table    btn closest  table         get cell location - https   stackoverflow com a 4999018 1366033   var cellIndex    cell 0  cellIndex   1      table find   show-column-footer   show      table find  tbody tr  thead tr            children   nth-child   cellIndex               hide           show-column-footer   click function e        var  table     this  closest  table        table find   show-column-footer   hide        table find  th  td   show         To support this  we ll add some markup to the table   In each column header  we can add something like this to provide a visual indicator of something clickable   lt button class  pull-right btn btn-default btn-condensed hide-column               data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt       lt i class  fa fa-eye-slash  gt  lt  i gt     lt  button gt    We ll allow the user to restore columns via a link in the table footer   If it s not persistent by default  then toggling it on dynamically in the header could jostle around the table  but you can really put it anywhere you d like    lt tfoot class  show-column-footer  gt      lt tr gt       lt th colspan  4  gt  lt a class  show-column  href     gt Some columns hidden - click to show all lt  a gt  lt  th gt     lt  tr gt   lt  tfoot gt    That s the basic functionality  Here s a demo below with a couple more things fleshed out  You can also add a tooltip to the button to help clarify its purpose  style the button a little more organically to a table header  and collapse the column width in order to add some  somewhat wonky  css animations to make the transition a little less jumpy     Working Demo in jsFiddle  amp  Stack Snippets    x000D   x000D    function     x000D       on init x000D        table-hideable  hide-col   each HideColumnIndex   x000D   x000D       on click x000D        hide-column   click HideColumnIndex  x000D   x000D    function HideColumnIndex     x000D      var  el     this   x000D      var  cell    el closest  th td   x000D      var  table    cell closest  table   x000D   x000D         get cell location - https   stackoverflow com a 4999018 1366033 x000D      var colIndex    cell 0  cellIndex   1  x000D   x000D         find and hide col index x000D       table find  tbody tr  thead tr   x000D         children   nth-child     colIndex        x000D         addClass  hide-col    x000D         x000D         show restore footer x000D       table find   footer-restore-columns   show   x000D      x000D   x000D       restore columns footer x000D        restore-columns   click function e    x000D      var  table     this  closest  table   x000D       table find   footer-restore-columns   hide   x000D       table find  th  td   x000D         removeClass  hide-col    x000D   x000D       x000D   x000D        data-toggle  tooltip     tooltip   x000D      trigger   hover  x000D       x000D   x000D     x000D  body   x000D    padding  15px  x000D    x000D   x000D   table-hideable td  x000D   table-hideable th   x000D    width  auto  x000D    transition  width  5s  margin  5s  x000D    x000D   x000D   btn-condensed btn-condensed   x000D    padding  0 5px  x000D    box-shadow  none  x000D    x000D   x000D   x000D     use class to have a little animation    x000D   hide-col   x000D    width  0px  important  x000D    height  0px  important  x000D    display  block  important  x000D    overflow  hidden  important  x000D    margin  0  important  x000D    padding  0  important  x000D    border  none  important  x000D    x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap css  gt  x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs bootswatch 3 3 7 paper bootstrap min css  gt  x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome css  gt  x000D   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   x000D   x000D   lt table class  table table-condensed table-hover table-bordered table-striped table-hideable  gt  x000D   x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt  x000D          Controller x000D           lt button class  pull-right btn btn-default btn-condensed hide-column  data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt  x000D             lt i class  fa fa-eye-slash  gt  lt  i gt    x000D           lt  button gt  x000D         lt  th gt  x000D         lt th class  hide-col  gt  x000D          Action x000D           lt button class  pull-right btn btn-default btn-condensed hide-column  data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt  x000D             lt i class  fa fa-eye-slash  gt  lt  i gt    x000D           lt  button gt  x000D         lt  th gt  x000D         lt th gt  x000D          Type x000D           lt button class  pull-right btn btn-default btn-condensed hide-column  data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt  x000D             lt i class  fa fa-eye-slash  gt  lt  i gt    x000D           lt  button gt  x000D         lt  th gt  x000D         lt th gt  x000D          Attributes x000D           lt button class  pull-right btn btn-default btn-condensed hide-column  data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt  x000D             lt i class  fa fa-eye-slash  gt  lt  i gt    x000D           lt  button gt  x000D         lt  th gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D   x000D       lt tr gt  x000D         lt td gt Home lt  td gt  x000D         lt td gt Index lt  td gt  x000D         lt td gt ActionResult lt  td gt  x000D         lt td gt Authorize lt  td gt  x000D       lt  tr gt  x000D   x000D       lt tr gt  x000D         lt td gt Client lt  td gt  x000D         lt td gt Index lt  td gt  x000D         lt td gt ActionResult lt  td gt  x000D         lt td gt Authorize lt  td gt  x000D       lt  tr gt  x000D   x000D       lt tr gt  x000D         lt td gt Client lt  td gt  x000D         lt td gt Edit lt  td gt  x000D         lt td gt ActionResult lt  td gt  x000D         lt td gt Authorize lt  td gt  x000D       lt  tr gt  x000D   x000D     lt  tbody gt  x000D     lt tfoot class  footer-restore-columns  gt  x000D       lt tr gt  x000D         lt th colspan  4  gt  lt a class  restore-columns  href     gt Some columns hidden - click to show all lt  a gt  lt  th gt  x000D       lt  tr gt  x000D     lt  tfoot gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

One line of code using jQuery which hides the 2nd column          td nth-child 2    hide      If your table has header th   use this      td nth-child 2  th nth-child 2    hide      Source  Hide a Table Column with a Single line of jQuery code  jsFiddle to test the code  http   jsfiddle net mgMem 1     If you want to see a good use case  take a look at my blog post   Hide a table column and colorize rows based on value with jQuery

User · Answer

The following should do it      input type  checkbox     click function         var index     this  attr  name   substr 2          table tr   each function                 td eq     index       this  toggle                  This is untested code  but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name  You could of course limit the selectors with a class or an ID

User · Answer

The following should do it      input type  checkbox     click function         var index     this  attr  name   substr 2          table tr   each function                 td eq     index       this  toggle                  This is untested code  but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name  You could of course limit the selectors with a class or an ID

User · Answer

And of course  the CSS only way for browsers that support nth-child   table td nth-child 2    display  none     This is for IE9 and newer   For your usecase  you d need several classes to hide the columns    hideCol1 td nth-child 1    display  none    hideCol2 td nth-child 2    display  none     ect

User · Answer

The following is building on Eran s code  with a few minor changes  Tested it and it seems to work fine on Firefox 3  IE7    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN                    http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt  head gt   lt script gt    document  ready function            input type  checkbox     click function             var index     this  attr  name   substr 3           index--             table tr   each function                     td eq     index       this  toggle                           th       this  attr  name    toggle                 lt  script gt   lt body gt   lt table gt   lt thead gt       lt tr gt           lt th class  col1  gt Header 1 lt  th gt           lt th class  col2  gt Header 2 lt  th gt           lt th class  col3  gt Header 3 lt  th gt       lt  tr gt   lt  thead gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    lt form gt       lt input type  checkbox  name  col1  checked  checked    gt  Hide Show Column 1  lt br   gt       lt input type  checkbox  name  col2  checked  checked    gt  Hide Show Column 2  lt br   gt       lt input type  checkbox  name  col3  checked  checked    gt  Hide Show Column 3  lt br   gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

The following should do it      input type  checkbox     click function         var index     this  attr  name   substr 2          table tr   each function                 td eq     index       this  toggle                  This is untested code  but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name  You could of course limit the selectors with a class or an ID

User · Answer

One line of code using jQuery which hides the 2nd column          td nth-child 2    hide      If your table has header th   use this      td nth-child 2  th nth-child 2    hide      Source  Hide a Table Column with a Single line of jQuery code  jsFiddle to test the code  http   jsfiddle net mgMem 1     If you want to see a good use case  take a look at my blog post   Hide a table column and colorize rows based on value with jQuery

User · Answer

The following is building on Eran s code  with a few minor changes  Tested it and it seems to work fine on Firefox 3  IE7    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN                    http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt  head gt   lt script gt    document  ready function            input type  checkbox     click function             var index     this  attr  name   substr 3           index--             table tr   each function                     td eq     index       this  toggle                           th       this  attr  name    toggle                 lt  script gt   lt body gt   lt table gt   lt thead gt       lt tr gt           lt th class  col1  gt Header 1 lt  th gt           lt th class  col2  gt Header 2 lt  th gt           lt th class  col3  gt Header 3 lt  th gt       lt  tr gt   lt  thead gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    lt form gt       lt input type  checkbox  name  col1  checked  checked    gt  Hide Show Column 1  lt br   gt       lt input type  checkbox  name  col2  checked  checked    gt  Hide Show Column 2  lt br   gt       lt input type  checkbox  name  col3  checked  checked    gt  Hide Show Column 3  lt br   gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

The following is building on Eran s code  with a few minor changes  Tested it and it seems to work fine on Firefox 3  IE7    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN                    http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt  head gt   lt script gt    document  ready function            input type  checkbox     click function             var index     this  attr  name   substr 3           index--             table tr   each function                     td eq     index       this  toggle                           th       this  attr  name    toggle                 lt  script gt   lt body gt   lt table gt   lt thead gt       lt tr gt           lt th class  col1  gt Header 1 lt  th gt           lt th class  col2  gt Header 2 lt  th gt           lt th class  col3  gt Header 3 lt  th gt       lt  tr gt   lt  thead gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    lt form gt       lt input type  checkbox  name  col1  checked  checked    gt  Hide Show Column 1  lt br   gt       lt input type  checkbox  name  col2  checked  checked    gt  Hide Show Column 2  lt br   gt       lt input type  checkbox  name  col3  checked  checked    gt  Hide Show Column 3  lt br   gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

I would like to do this without attaching a class to every td   Personally  I would go with the the class-on-each-td th col approach  Then you can switch columns on and off using a single write to className on the container  assuming style rules like   table hide1  col1   display  none    table hide2  col2   display  none          This is going to be faster than any JS loop approach  for really long tables it can make a significant difference to responsiveness   If you can get away with not supporting IE6  you could use adjacency selectors to avoid having to add the class attributes to tds  Or alternatively  if your concern is making the markup cleaner  you could add them from JavaScript automatically in an initialisation step

User · Answer

The following should do it      input type  checkbox     click function         var index     this  attr  name   substr 2          table tr   each function                 td eq     index       this  toggle                  This is untested code  but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name  You could of course limit the selectors with a class or an ID

User · Answer

you could use colgroups    lt table gt       lt colgroup gt          lt col class  visible class   gt          lt col class  visible class   gt          lt col class  invisible class   gt         lt  colgroup gt       lt thead gt           lt tr gt  lt th class  col1  gt Header 1 lt  th gt  lt th class  col2  gt Header 2 lt  th gt  lt th class  col3  gt Header 3 lt  th gt  lt  tr gt       lt  thead gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    your script then could change just the desire  lt col gt  class

User · Answer

you could use colgroups    lt table gt       lt colgroup gt          lt col class  visible class   gt          lt col class  visible class   gt          lt col class  invisible class   gt         lt  colgroup gt       lt thead gt           lt tr gt  lt th class  col1  gt Header 1 lt  th gt  lt th class  col2  gt Header 2 lt  th gt  lt th class  col3  gt Header 3 lt  th gt  lt  tr gt       lt  thead gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    your script then could change just the desire  lt col gt  class

User · Answer

And of course  the CSS only way for browsers that support nth-child   table td nth-child 2    display  none     This is for IE9 and newer   For your usecase  you d need several classes to hide the columns    hideCol1 td nth-child 1    display  none    hideCol2 td nth-child 2    display  none     ect

User · Answer

you could use colgroups    lt table gt       lt colgroup gt          lt col class  visible class   gt          lt col class  visible class   gt          lt col class  invisible class   gt         lt  colgroup gt       lt thead gt           lt tr gt  lt th class  col1  gt Header 1 lt  th gt  lt th class  col2  gt Header 2 lt  th gt  lt th class  col3  gt Header 3 lt  th gt  lt  tr gt       lt  thead gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    your script then could change just the desire  lt col gt  class

User · Answer

The following is building on Eran s code  with a few minor changes  Tested it and it seems to work fine on Firefox 3  IE7    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN                    http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt  head gt   lt script gt    document  ready function            input type  checkbox     click function             var index     this  attr  name   substr 3           index--             table tr   each function                     td eq     index       this  toggle                           th       this  attr  name    toggle                 lt  script gt   lt body gt   lt table gt   lt thead gt       lt tr gt           lt th class  col1  gt Header 1 lt  th gt           lt th class  col2  gt Header 2 lt  th gt           lt th class  col3  gt Header 3 lt  th gt       lt  tr gt   lt  thead gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    lt form gt       lt input type  checkbox  name  col1  checked  checked    gt  Hide Show Column 1  lt br   gt       lt input type  checkbox  name  col2  checked  checked    gt  Hide Show Column 2  lt br   gt       lt input type  checkbox  name  col3  checked  checked    gt  Hide Show Column 3  lt br   gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

Without class  You can use the Tag then   var tds   document getElementsByTagName  TD   i  for  i in tds      tds i  style display    none       And to show them use      style display    table-cell

User · Answer

Without class  You can use the Tag then   var tds   document getElementsByTagName  TD   i  for  i in tds      tds i  style display    none       And to show them use      style display    table-cell

User · Answer

Here s a little more fully featured answer that provides some user interaction on a per column basis   If this is going to be a dynamic experience  there needs to be a clickable toggle on each column that indicates the ability to hide the column  and then a way to restore previously hidden columns     That would look something like this in JavaScript       hide-column   click function e     var  btn     this     var  cell    btn closest  th td     var  table    btn closest  table         get cell location - https   stackoverflow com a 4999018 1366033   var cellIndex    cell 0  cellIndex   1      table find   show-column-footer   show      table find  tbody tr  thead tr            children   nth-child   cellIndex               hide           show-column-footer   click function e        var  table     this  closest  table        table find   show-column-footer   hide        table find  th  td   show         To support this  we ll add some markup to the table   In each column header  we can add something like this to provide a visual indicator of something clickable   lt button class  pull-right btn btn-default btn-condensed hide-column               data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt       lt i class  fa fa-eye-slash  gt  lt  i gt     lt  button gt    We ll allow the user to restore columns via a link in the table footer   If it s not persistent by default  then toggling it on dynamically in the header could jostle around the table  but you can really put it anywhere you d like    lt tfoot class  show-column-footer  gt      lt tr gt       lt th colspan  4  gt  lt a class  show-column  href     gt Some columns hidden - click to show all lt  a gt  lt  th gt     lt  tr gt   lt  tfoot gt    That s the basic functionality  Here s a demo below with a couple more things fleshed out  You can also add a tooltip to the button to help clarify its purpose  style the button a little more organically to a table header  and collapse the column width in order to add some  somewhat wonky  css animations to make the transition a little less jumpy     Working Demo in jsFiddle  amp  Stack Snippets    x000D   x000D    function     x000D       on init x000D        table-hideable  hide-col   each HideColumnIndex   x000D   x000D       on click x000D        hide-column   click HideColumnIndex  x000D   x000D    function HideColumnIndex     x000D      var  el     this   x000D      var  cell    el closest  th td   x000D      var  table    cell closest  table   x000D   x000D         get cell location - https   stackoverflow com a 4999018 1366033 x000D      var colIndex    cell 0  cellIndex   1  x000D   x000D         find and hide col index x000D       table find  tbody tr  thead tr   x000D         children   nth-child     colIndex        x000D         addClass  hide-col    x000D         x000D         show restore footer x000D       table find   footer-restore-columns   show   x000D      x000D   x000D       restore columns footer x000D        restore-columns   click function e    x000D      var  table     this  closest  table   x000D       table find   footer-restore-columns   hide   x000D       table find  th  td   x000D         removeClass  hide-col    x000D   x000D       x000D   x000D        data-toggle  tooltip     tooltip   x000D      trigger   hover  x000D       x000D   x000D     x000D  body   x000D    padding  15px  x000D    x000D   x000D   table-hideable td  x000D   table-hideable th   x000D    width  auto  x000D    transition  width  5s  margin  5s  x000D    x000D   x000D   btn-condensed btn-condensed   x000D    padding  0 5px  x000D    box-shadow  none  x000D    x000D   x000D   x000D     use class to have a little animation    x000D   hide-col   x000D    width  0px  important  x000D    height  0px  important  x000D    display  block  important  x000D    overflow  hidden  important  x000D    margin  0  important  x000D    padding  0  important  x000D    border  none  important  x000D    x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap css  gt  x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs bootswatch 3 3 7 paper bootstrap min css  gt  x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome css  gt  x000D   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   x000D   x000D   lt table class  table table-condensed table-hover table-bordered table-striped table-hideable  gt  x000D   x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt  x000D          Controller x000D           lt button class  pull-right btn btn-default btn-condensed hide-column  data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt  x000D             lt i class  fa fa-eye-slash  gt  lt  i gt    x000D           lt  button gt  x000D         lt  th gt  x000D         lt th class  hide-col  gt  x000D          Action x000D           lt button class  pull-right btn btn-default btn-condensed hide-column  data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt  x000D             lt i class  fa fa-eye-slash  gt  lt  i gt    x000D           lt  button gt  x000D         lt  th gt  x000D         lt th gt  x000D          Type x000D           lt button class  pull-right btn btn-default btn-condensed hide-column  data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt  x000D             lt i class  fa fa-eye-slash  gt  lt  i gt    x000D           lt  button gt  x000D         lt  th gt  x000D         lt th gt  x000D          Attributes x000D           lt button class  pull-right btn btn-default btn-condensed hide-column  data-toggle  tooltip  data-placement  bottom  title  Hide Column  gt  x000D             lt i class  fa fa-eye-slash  gt  lt  i gt    x000D           lt  button gt  x000D         lt  th gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D   x000D       lt tr gt  x000D         lt td gt Home lt  td gt  x000D         lt td gt Index lt  td gt  x000D         lt td gt ActionResult lt  td gt  x000D         lt td gt Authorize lt  td gt  x000D       lt  tr gt  x000D   x000D       lt tr gt  x000D         lt td gt Client lt  td gt  x000D         lt td gt Index lt  td gt  x000D         lt td gt ActionResult lt  td gt  x000D         lt td gt Authorize lt  td gt  x000D       lt  tr gt  x000D   x000D       lt tr gt  x000D         lt td gt Client lt  td gt  x000D         lt td gt Edit lt  td gt  x000D         lt td gt ActionResult lt  td gt  x000D         lt td gt Authorize lt  td gt  x000D       lt  tr gt  x000D   x000D     lt  tbody gt  x000D     lt tfoot class  footer-restore-columns  gt  x000D       lt tr gt  x000D         lt th colspan  4  gt  lt a class  restore-columns  href     gt Some columns hidden - click to show all lt  a gt  lt  th gt  x000D       lt  tr gt  x000D     lt  tfoot gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

lt p gt  lt input type  checkbox  name  ch1  checked  checked    gt  First Name lt  p gt         lt td class  ch1  gt     lt  td gt     lt script gt           document  ready function                     demo   multiselect                             input checkbox not  checked    each function         var column    table        this  attr  name          column  hide            input checkbox   click function        var column    table        this  attr  name          column  toggle          lt  script gt

User · Answer

I would like to do this without attaching a class to every td   Personally  I would go with the the class-on-each-td th col approach  Then you can switch columns on and off using a single write to className on the container  assuming style rules like   table hide1  col1   display  none    table hide2  col2   display  none          This is going to be faster than any JS loop approach  for really long tables it can make a significant difference to responsiveness   If you can get away with not supporting IE6  you could use adjacency selectors to avoid having to add the class attributes to tds  Or alternatively  if your concern is making the markup cleaner  you could add them from JavaScript automatically in an initialisation step

User · Answer

I would like to do this without attaching a class to every td   Personally  I would go with the the class-on-each-td th col approach  Then you can switch columns on and off using a single write to className on the container  assuming style rules like   table hide1  col1   display  none    table hide2  col2   display  none          This is going to be faster than any JS loop approach  for really long tables it can make a significant difference to responsiveness   If you can get away with not supporting IE6  you could use adjacency selectors to avoid having to add the class attributes to tds  Or alternatively  if your concern is making the markup cleaner  you could add them from JavaScript automatically in an initialisation step

User · Answer

you could use colgroups    lt table gt       lt colgroup gt          lt col class  visible class   gt          lt col class  visible class   gt          lt col class  invisible class   gt         lt  colgroup gt       lt thead gt           lt tr gt  lt th class  col1  gt Header 1 lt  th gt  lt th class  col2  gt Header 2 lt  th gt  lt th class  col3  gt Header 3 lt  th gt  lt  tr gt       lt  thead gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt       lt tr gt  lt td gt Column1 lt  td gt  lt td gt Column2 lt  td gt  lt td gt Column3 lt  td gt  lt  tr gt   lt  table gt    your script then could change just the desire  lt col gt  class

User · Answer

I would like to do this without attaching a class to every td   Personally  I would go with the the class-on-each-td th col approach  Then you can switch columns on and off using a single write to className on the container  assuming style rules like   table hide1  col1   display  none    table hide2  col2   display  none          This is going to be faster than any JS loop approach  for really long tables it can make a significant difference to responsiveness   If you can get away with not supporting IE6  you could use adjacency selectors to avoid having to add the class attributes to tds  Or alternatively  if your concern is making the markup cleaner  you could add them from JavaScript automatically in an initialisation step

User · Answer

lt p gt  lt input type  checkbox  name  ch1  checked  checked    gt  First Name lt  p gt         lt td class  ch1  gt     lt  td gt     lt script gt           document  ready function                     demo   multiselect                             input checkbox not  checked    each function         var column    table        this  attr  name          column  hide            input checkbox   click function        var column    table        this  attr  name          column  toggle          lt  script gt

[jquery] Hide/Show Column in an HTML Table

Working Demo in jsFiddle & Stack Snippets:

Examples related to jquery

Examples related to html

Examples related to hide

Examples related to html-table

Examples related to show