title: Search table and return correct table rows on button click using javascript/jQuery and the contents of the 'search' bar
body: <p>Basically I currently have a search bar that works using a .keyup() function and the correct row/s are returned and the others hidden as the user enters a value. I am trying to learn how to do this (using .click() but my jQuery/javascript knowledge isn't too strong). Can someone help me adapt my current function to work so that the contents of the search bar is only used to search the table when the search button is clicked and not as a user is typing. Thanks a lot in advance.</p>
  
  <p>HTML:</p>
  
  <p></p>
  
  <pre><code>        &lt;h2&gt;Customer Data&lt;/h2&gt;
  
          &lt;p&gt;Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.&lt;/p&gt; 
          &lt;div id="table" class="table-editable"  style="width:1000px; text-align: left;"&gt;
                  &lt;span class="table-add glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                  &lt;table class="table"&gt;
              &lt;thread&gt;
                  &lt;tr&gt;
                      &lt;th width="300"&gt;Customer Name&lt;/th&gt;
                      &lt;th width="250"&gt;Postcode&lt;/th&gt;
                  &lt;th width="200"&gt;Telephone No&lt;/th&gt;
                      &lt;th width="150"&gt;Remove&lt;/th&gt;
                      &lt;th width="100"&gt;Adjust Row&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thread&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Adam Greenwood&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;GU17 0DL&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;01252445567&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Sam Test&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;GU47 7GR&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;01276122047&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100"&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Mark Colin&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;YA32 3DM&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;44+7449929147&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100"&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Frank Wright&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;SF65 7YY&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;00866451340&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100"&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Arnold Carrol&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;LE22 2WQ&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;05429552095&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100"&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Thomas Gallagher&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;YL66 7FF&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;94232520682&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100"&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Stephen Major&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;SA12 6TG&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;54295650429&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100"&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Neil Reynolds&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;MU70 6XC&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;40768991327&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100"&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Jeff Reinbold&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;RG10 7HM&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;01865439&lt;/div&gt;
                  &lt;td width="150"&gt;
                      &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td width="100"&gt;
                      &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;!-- This is our clonable table line --&gt;
                  &lt;tr class="hide"&gt;
                      &lt;td width="300"&gt;&lt;div contenteditable&gt;Empty&lt;/div&gt;
                      &lt;td width="250"&gt;&lt;div contenteditable&gt;Empty&lt;/div&gt;
                  &lt;td width="200"&gt;&lt;div contenteditable&gt;Empty&lt;/div&gt;
                      &lt;td width="150"&gt;&lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td width="100"&gt;&lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
                      &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;input type="text" id="search" placeholder="Type to search..." /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;button&gt;Search&lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Search Function:</p>
  
  <pre><code>&lt;script&gt;
          $("#search").keyup(function(){
                  _this = this;
  
                  $.each($("#table tbody tr"), function() {
  
                      if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                          $(this).hide();
                      else
                          $(this).show();                
                  });
              }); 
          &lt;/script&gt; 
  </code></pre>