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.

But sure, after click the button page is getting refresh.

$(document).ready(function() {       



    $("#historylist").hide();



    $("#historysearch").click(function() {

        $("#historylist").show();

    });

    // }

});    



<table id="searchTbl" width="800" >

<tr>

    <td valign="top">Release No</td>

    <td valign="top">

        <input type="text" name="releaseNo" value="" style="width:200" />

    </td>

    <td valign="top"><input type="button" value="Search" onClick="commit()" style="width:80" id="historysearch"/></td>

</tr>

<br /><br />



    <table border="1" cellpadding="2" cellspacing="0" id="historylist">

    <tr>

        <th><font size="-1">Header1</font></th>

        <th><font size="-1">Header2</font></th>

        <th><font size="-1">Header3</font></th>

        <th><font size="-1">Header4</font></th> 

        <th><font size="-1">Header5</font></th>

    </tr>

    </table>

</table>

JavaScript:

function commit(){



    document.menu.cmd.value='search';

    document.menu.submit();       

}

When click the button it show the table and again hiding the table.

$(document).ready(function() { 

$("#historylist").hide(); 

$("#historysearch").click(function(e) { 

    e.preventDefault(); 

    $("#historylist").show(); 

    commit(); // moved from the onClick attribute });

});