hide table with clicking button
<p>I can show a table with a link label with following codes with jquery.</p>

<pre><code> $(document).ready(function()
{
    $("#show").click(function()
    {
        $("#table").show();
    });
});
</code></pre>

<p>but when i want to do this for a button it will show the table for a second then it will be hidden. these are the codes for the button :</p>

<pre><code>$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").show();
    });
});
</code></pre>

<p>Update :</p>

<pre><code>    $(document).ready(function()
{
    $("#table").hide();
    $("#button").click(function()
    {
        $("#table").show();
    });

});
</code></pre>

<p>Here are the codes :</p>

<pre><code>    &lt;script type="text/javascript" src="jquery-1.8.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function()
{
    $("#table").hide();
    $("#button").click(function()
    {
        $("#table").show();
    });

});
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;&lt;a href="#" id="show"&gt;Show&lt;/a&gt; &lt;a href="#" id="hide"&gt;Hide&lt;/a&gt;&lt;/p&gt;
&lt;form id="form1" name="form1" method="post" action=""&gt;
  &lt;p&gt;
    &lt;input type="submit" name="button" id="button" value="Show" /&gt;
  &lt;/p&gt;
  &lt;p&gt;&amp;nbsp; &lt;/p&gt;
&lt;/form&gt;
&lt;table width="515" border="0" class="table1" id="table"&gt;
  &lt;tr&gt;
    &lt;td width="509" class="table1"&gt;&lt;img src="Image/Tulips.jpg" width="400" height="400" alt="Tulips" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
