隐藏桌子临时

Question

I am making a mail sort of system.Now i am facing a problem that suppose i have inbox message table shown in front and a searchbar on the top of that table to search for mails from particular user.But how to remove that inbox table temporarily and show the results of searchbar their and on clicking back option which will be provided if the user click for search,The inbox messages come back.

Here is my mail search bar code :

 <div class="mail_search">
 <input type="text" class="mail_search_bar" placeholder="Search Mail" name="searchtext" onkeyup="searchuser(this.value)">

To get the search result i made a div just above my table like this :

<div id="showtext"></div>
<div id="dtl_table"><table border='3' cellpadding='5'  cellspacing="0">

And the table is being populated from database dynamically like this for inbox mails .

<tr bgcolor="#5D1B90" color="#FFFFFF" onmouseover="ChangeColor(this, true,false);" onmouseout="ChangeColor(this, false,false);" onclick="DoNav('showmail.jsp?mid=   <%=messageid%>');">    
<td><input type="checkbox" name="" onclick="DoRemove(event);"  width="20" class="select_all_mail" value=<%=messageid%>></td>
<td callspan="3" width="1000px"><%=sendername%>  :   <%=messagesubject%>      <%=sendingtime%></td>

</tr>

SCRIPT CODE :

function searchuser(str){
    document.getElementById('dtl_table').style.visibility = "hidden";
    //var valuetosearch=document.myinbox.searchtext.value;

    //document.location.href='searchemails?searchfor='+valuetosearch;

    var xreq;
    if(str=="")
    {
      document.getElementById("showtext").innerHTML="";
      return;
    }

     if(window.XMLHttpRequest)
     {
       xreq=new XMLHttpRequest();
     }

     else
     {
        xreq=new ActiveXObject("Microsoft.XMLHTTP");
     }

     xreq.onreadystatechange=function ()
     {
        if((xreq.readyState==4) && (xreq.status==200))
        {
            document.getElementById("showtext").innerHTML=xreq.responseText;
         }
      }

      xreq.open("GET","searchemails.jsp?q="+str,"true");
      xreq.send();
}
</script>

But even if i simply check the text typed in searchmails.jsp like this it shows no results.

<% String searchfor=request.getParameter("q");
%>
<h1><%=searchfor%></h1>

Answer 1

The simple way to hide things is to create a CSS rule like .hidden {display: none;}. When someone uses the search, add the class "hidden" to your table. When you want to display the table again, remove the class. In order to ensure that the class is applied, be as specific as you can with the rule. E.g. table#inbox.hidden instead of just .hidden.

What happens to the page layout when the table is hidden depends on how your page is set up.