title: Search HTML table with JS and jQuery
body: <p><br />
  I made a table and wanted to make it searchable, so I googled and looked here at starckoverflow. <br />
  But somehow, the things I've found, that should work, dont work for me?</p>
  
  <p>Here is the code, both HTML and JS. <br />
  <br /></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js" lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta name="author" content="C.Palma" /&gt;
      &lt;meta name="content" content="World of Warcraft. Characters. Project. Learn 2 Code." /&gt;
  
      &lt;title&gt;World of Warcraft Characters.&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="css/foundation.css" /&gt;
      &lt;script src="js/modernizr.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          // When document is ready: this gets fired before body onload &lt;img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /&gt;
          $(document).ready(function(){
              // Write on keyup event of keyword input element
              $("search").keyup(function(){
                  // When value of the input is not blank
                  if( $(this).val() != "")
                  {
                      // Show only matching TR, hide rest of them
                      $("#table tbody tr").hide();
                      $("#table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
                  }
                  else
                  {
                      // When there is no input or clean again, show everything back
                      $("#table tbody tr").show();
                  }
              });
          });
          // jQuery expression for case-insensitive filter
          $.extend($.expr[":"],
                  {
                      "contains-ci": function(elem, i, match, array)
                      {
                          return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) &gt;= 0;
                      }
                  });
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="row large-centered"&gt;
          &lt;h1&gt;World of Warcraft characters. &lt;small&gt;Mine and my brothers, we share.&lt;/small&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="row large-centered"&gt;
          &lt;input type="text" id="search" placeholder="Type to search..." /&gt;
          &lt;table id="table" width="100%"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Character name&lt;/th&gt;
                      &lt;th&gt;Class&lt;/th&gt;
                      &lt;th&gt;Realm&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Benjamin.&lt;/td&gt;
                  &lt;td&gt;Rogue.&lt;/td&gt;
                  &lt;td&gt;Uldum ES.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Cachoito.&lt;/td&gt;
                  &lt;td&gt;Hunter.&lt;/td&gt;
                  &lt;td&gt;Agamaggan EN.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Contemplario.&lt;/td&gt;
                  &lt;td&gt;Paladin.&lt;/td&gt;
                  &lt;td&gt;Uldum ES.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Elthron.&lt;/td&gt;
                  &lt;td&gt;Death Knight.&lt;/td&gt;
                  &lt;td&gt;Agamaggan ES.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Giloh.&lt;/td&gt;
                  &lt;td&gt;Priest.&lt;/td&gt;
                  &lt;td&gt;Agamaggan EN.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Kitialamok.&lt;/td&gt;
                  &lt;td&gt;Warrior.&lt;/td&gt;
                  &lt;td&gt;Agamaggan EN.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Magustroll.&lt;/td&gt;
                  &lt;td&gt;Mage.&lt;/td&gt;
                  &lt;td&gt;Agamaggan EN.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Marselus.&lt;/td&gt;
                  &lt;td&gt;Mage.&lt;/td&gt;
                  &lt;td&gt;Uldum ES.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Mistrala.&lt;/td&gt;
                  &lt;td&gt;Warrior.&lt;/td&gt;
                  &lt;td&gt;Uldum ES.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Suavemente.&lt;/td&gt;
                  &lt;td&gt;Warrior.&lt;/td&gt;
                  &lt;td&gt;Agamaggan EN.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Tittus.&lt;/td&gt;
                  &lt;td&gt;Monk.&lt;/td&gt;
                  &lt;td&gt;Agamaggan EN.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Yarlokk.&lt;/td&gt;
                  &lt;td&gt;Warlock.&lt;/td&gt;
                  &lt;td&gt;Uldum ES.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/foundation.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).foundation();
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>