title: Need to add/remove class from TD of the table
body: <p>Need To Add/Remove Class from TD of table, based on button click. By Default all the TD will be hidden. While clicking button, i need to enable the respective TD alone.</p>
  
  <p>JSFiddle : <a href="http://jsfiddle.net/eVj8V/2/" rel="nofollow">http://jsfiddle.net/eVj8V/2/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          .hideThis {display: none;}
          td, th {
                      border: thin solid;
              }
      &lt;/style&gt;
  
      &lt;script&gt;
  
          function constrctTable() {
              var TableRef = document.getElementById("TableConstruction");
              TableRef.innerHTML = "";
              var table = "";
              table += "&lt;table&gt;";
              table += "&lt;tr style='border: inherit;' id='tableColumns'&gt;";
              table += "&lt;td&gt;S.No&lt;/td&gt;";
              table += "&lt;td&gt;Name&lt;/td&gt;";
              table += "&lt;td class=hideThis&gt;Employee No&lt;/td&gt;";
              table += "&lt;td class=hideThis&gt;Manager No&lt;/td&gt;";
              table += "&lt;td class=hideThis&gt;Clerk No&lt;/td&gt;";
  
  
              table += "&lt;/tr&gt;";
              for(i=0; i&lt;5; i++) {
                  table += "&lt;tr class=recordRow&gt;";
                  table += "&lt;td&gt;"+i+"&lt;/td&gt;";
                  table += "&lt;td&gt;Raj "+i+"&lt;/td&gt;";
                  table += "&lt;td class=hideThis name='Employee'&gt;"+ i +"&lt;/td&gt;";
                  table += "&lt;td class=hideThis name='Manager'&gt;"+ i +"&lt;/td&gt;";
                  table += "&lt;td class=hideThis name='Clerk'&gt;"+ i +"&lt;/td&gt;";
                      table += "&lt;/tr&gt;";
              }
              table += "&lt;/table&gt;";
  
              TableRef.innerHTML = table;
          }
  
  
          function enableEmployee(enableRef) {
              $('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
              $('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
              $('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
          }
  
  
          function enableManager(enableRef) {
              $('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
              $('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
              $('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
          }
  
          function enableClerk(enableRef) {
              $('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
              $('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
              $('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
          }   
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body onload="constrctTable();"&gt;
  
  &lt;div id="TableConstruction"&gt; &lt;/div&gt;
  
  &lt;button type="button"   onclick="enableEmployee('Employee')"&gt; Employee &lt;/button&gt;
  &lt;button type="button"   onclick="enableManager('Manager')"&gt; Manager &lt;/button&gt;
  &lt;button type="button"   onclick="enableClerk('Clerk')"&gt; Clerk &lt;/button&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>