title: jQuery show/hide column on big table performance
body: <p>I have html table with about 30 columns and somewhere between 10 to 500 ish rows. I would like to show/hide a set of columns o a button click. </p>
  
  <p>I have tried 2 approaches</p>
  
  <ol>
  <li>iterate through table's thead th and do .show() or .hide() on the TH and TD.</li>
  <li>iterate through table's thead th and change class to show/hide the TH and TD.</li>
  </ol>
  
  <p>the function is implemented as following snippet. However, the performance is not that great. Show/Hide say 20 columns takes about 5~10 seconds on maybe 80~120 rows of data.</p>
  
  <p>i am just wondering if there is anything we can do to make it go faster.</p>
  
  <pre><code>function ToggleHeadVisibility(showHide) {
  
      var index = 0;
  
      $('#' + gridViewName + ' thead th').each(function(index) {
          index++;
          if (showHide == "SHOW") {
              /*
              $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show();
              $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show();
              */
              $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide');
              $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide');
          } else if (showHide = "HIDE") {
              /*
              //if (showColumnArray.has($(this).get(0).innerHTML)) {
              if (showColumnArray.has($(this).attr('title'))) {
              $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show();
              $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show();
              }
              else {
              $('#' + gridViewName + ' th:nth-child(' + (index) + ')').hide();
              $('#' + gridViewName + ' td:nth-child(' + (index) + ')').hide();
              }
              */
              if (showColumnArray.has($(this).attr('title'))) {
                  $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide');
                  $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide');
              } else {
                  $('#' + gridViewName + ' th:nth-child(' + (index) + ')').addClass('columnHide');
                  $('#' + gridViewName + ' td:nth-child(' + (index) + ')').addClass('columnHide');
              }
  
          }
      });
  }
  </code></pre>