title: Display the table when click the button - jQuery/JavaScript
body: <p>Please advise how to achieve that hide the html inner table when page loading and click the search button, table will display with results only. I don't want to show the empty table. Please see the below code which I have tried.</p>
  <p>But sure, after click the button page is getting refresh.</p>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {       
  
      $(&quot;#historylist&quot;).hide();
  
      $(&quot;#historysearch&quot;).click(function() {
          $(&quot;#historylist&quot;).show();
      });
      // }
  });    
  
  &lt;table id=&quot;searchTbl&quot; width=&quot;800&quot; &gt;
  &lt;tr&gt;
      &lt;td valign=&quot;top&quot;&gt;Release No&lt;/td&gt;
      &lt;td valign=&quot;top&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;releaseNo&quot; value=&quot;&quot; style=&quot;width:200&quot; /&gt;
      &lt;/td&gt;
      &lt;td valign=&quot;top&quot;&gt;&lt;input type=&quot;button&quot; value=&quot;Search&quot; onClick=&quot;commit()&quot; style=&quot;width:80&quot; id=&quot;historysearch&quot;/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;br /&gt;&lt;br /&gt;
  
      &lt;table border=&quot;1&quot; cellpadding=&quot;2&quot; cellspacing=&quot;0&quot; id=&quot;historylist&quot;&gt;
      &lt;tr&gt;
          &lt;th&gt;&lt;font size=&quot;-1&quot;&gt;Header1&lt;/font&gt;&lt;/th&gt;
          &lt;th&gt;&lt;font size=&quot;-1&quot;&gt;Header2&lt;/font&gt;&lt;/th&gt;
          &lt;th&gt;&lt;font size=&quot;-1&quot;&gt;Header3&lt;/font&gt;&lt;/th&gt;
          &lt;th&gt;&lt;font size=&quot;-1&quot;&gt;Header4&lt;/font&gt;&lt;/th&gt; 
          &lt;th&gt;&lt;font size=&quot;-1&quot;&gt;Header5&lt;/font&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/table&gt;
  </code></pre>
  <p><strong>JavaScript:</strong></p>
  <pre class="lang-js prettyprint-override"><code>function commit(){
  
      document.menu.cmd.value='search';
      document.menu.submit();       
  }
  </code></pre>
  <p>When click the button it show the table and again hiding the table.</p>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() { 
  $(&quot;#historylist&quot;).hide(); 
  $(&quot;#historysearch&quot;).click(function(e) { 
      e.preventDefault(); 
      $(&quot;#historylist&quot;).show(); 
      commit(); // moved from the onClick attribute });
  });
  </code></pre>