title: Javascript hide certain table rows when a button is clicked
body: <p>I want to hide certain rows in my table when I click a button as well as retain certain rows. For example, I clicked "Show Fire-based champs" button. It will only show champs that have the Fire attribute and will hide the rest (from the same table). I clicked another button called "Show Water-based champs" that will only show champs that have the Water attribute and will hide the rest etc. and will be the same for other buttons. Anyone can make a code for it? I'm not experienced in JS.</p>
  
  <p>Here is how the main table looks like (just a sample, there are a lot more table rows).</p>
  
  <pre><code>&lt;table border="1" width="800"&gt;
  &lt;thead&gt;&lt;tr&gt;
      &lt;th&gt;Hero&lt;/th&gt;
      &lt;th&gt;Class&lt;/th&gt;
      &lt;th&gt;Offensive Skill&lt;/th&gt;
      &lt;th&gt;Passive Skill&lt;/th&gt;
      &lt;th&gt;Ultimate&lt;/th&gt;
  &lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;&lt;a class="holy"&gt;Arcana&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;the Arcane Manipulator&lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt;Arcane Destroyer&lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;&lt;a class="fire"&gt;Azakiel&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;the Blood Mage&lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt;Elf Blood&lt;/td&gt;
      &lt;td&gt;Call of the Phoenix&lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;&lt;a class="wind"&gt;Bahamut&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;the King of the Skies&lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt;Mega Flare&lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;&lt;a class="dark"&gt;Carinblack&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;the Dark Assailant&lt;/td&gt;
      &lt;td&gt;Sword Bash&lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt;Blade of the Dark&lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;&lt;a class="earth"&gt;Dran&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;the Steel Beast&lt;/td&gt;
      &lt;td&gt;Rushing Tackle&lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt;Rolling Thunder&lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;&lt;a class="water"&gt;Fenrir&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;the Water Emperor&lt;/td&gt;
      &lt;td&gt;Water Barrage&lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt;Waterfall&lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;&lt;a class="thunder"&gt;Larza&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;the Lightning Heroine&lt;/td&gt;
      &lt;td&gt;Staff of Lightning&lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt;Storm Surge&lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;&lt;a class="thunder"&gt;Razor&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;the Thunder Emperor&lt;/td&gt;
      &lt;td&gt;Thunder Strike&lt;/td&gt;
      &lt;td&gt; - &lt;/td&gt;
      &lt;td&gt;Thunderstorm&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>
  
  <br />
  <br /></p>