Hide/Show Jsp generated tables using Javascript? (screenshot) 1

rudy23 · Feb 25, 2004

Hi Guys. Am relatively new to Javascript. Below is a screenshot of what my Client wants.

http://38.117.162.2/new/hideshow.jpg

These are 3 Individual reports. The have been created by using JSP’s which query the database and generate these reports. What he wants is for reports to collapse/expand when the user clicks on the Hide Details Button using Javascript without repainting the page. Can this be done as the JSP’s themselves are pretty complex and resource intensive. Will the Javascript have to Envelope the JSP code ? I guess so.Is there any good robust javascript solution or should I just stick to repainting the whole page when he clicks the Hide Details Link. I wouldn’t mind buying a script if need be.

The data for all reports is available when the page loads and hence we wont have to make any database calls to Hide/Show.

Any guidance, Help reference greatly appreciated.

simonchristieis · Feb 25, 2004

find the area that has the information in it, give it an id
eg: myArea

and use

document.getElementById("myArea&quot

.style.display='none';

hth

simon

BabyJeffy · Feb 25, 2004

You can use CSS and some simple Javascript to do this with ease.

Wrap the data you want to show/hide in a <div> (say) and give that div an id...

Code:

&lt;div id=&quot;tableData1&quot;&gt;.....&lt;/div&gt;

You can now target that div using it's unique id... put this on the show/hide text:

Code:

&lt;a href=&quot;javascript:showHide('tableData1');&quot;&gt;Show/Hide&lt;/a&gt;

And then write a simple javascript function like this:

Code:

function showHide(_myDiv)
{
  var myDivToChange = document.getElementById(_myDiv);
  if (myDivToChange.style.display == 'block')
  {
    myDivToChange.style.display = 'none';
  } else {
    myDivToChange.style.display = 'block';
  }
}

Now... this code has no attempt to manage error checking etc... but it ought to do exactly what you are after.

Any questions, specific follow-ups etc... post here and I'm sure we can help you.

Jeff

rudy23 · Feb 25, 2004

Hey Jeffy that works just the way I wanted it to. Cant believe the solution could be this simple. Thanks a lot man.

Are there any scenarios where I have to take extra precautions or soemthing like that cos u said. " this code has no attempt to manage error checking etc..."

Also the <div> tags can envelope only a table right. not a <tr> right?

Let me know

Thanks again

BabyJeffy · Feb 25, 2004

Here is a working test harness showing this working - it works fine in IE 5.17 for the Mac (if that's any help) *grin*

Code:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Tek-Tips Rock&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function showHide(_myDivName)
{
  var myObj = document.getElementById(_myDivName);
  myObj.style.display = myObj.style.display == 'none' ? 'block' : 'none';
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;table border=&quot;1&quot; width=&quot;300&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
  &lt;tr&gt;&lt;th&gt;&lt;a href=&quot;javascript://;&quot; onclick=&quot;this.innerHTML=this.innerHTML=='Hide'?'&lt;em&gt;Show&lt;/em&gt;':'Hide';showHide('myDataDiv_1');&quot;&gt;Hide&lt;/a&gt;&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Header&lt;/td&gt;&lt;/tr&gt;
  &lt;div id=&quot;myDataDiv_1&quot; style=&quot;display:block;&quot;&gt;
    &lt;tr&gt;&lt;td&gt;Line 1&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Line 2&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Line 3&lt;/td&gt;&lt;/tr&gt;
  &lt;/div&gt;
&lt;tr&gt;&lt;td&gt;Footer&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;table border=&quot;1&quot; width=&quot;300&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
  &lt;tr&gt;&lt;th&gt;&lt;a href=&quot;javascript://;&quot; onclick=&quot;this.innerHTML=this.innerHTML=='Hide'?'&lt;em&gt;Show&lt;/em&gt;':'Hide';showHide('myDataDiv_2');&quot;&gt;Hide&lt;/a&gt;&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Header&lt;/td&gt;&lt;/tr&gt;
  &lt;div id=&quot;myDataDiv_2&quot; style=&quot;display:block;&quot;&gt;
    &lt;tr&gt;&lt;td&gt;Line 1&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Line 2&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Line 3&lt;/td&gt;&lt;/tr&gt;
  &lt;/div&gt;
  &lt;tr&gt;&lt;td&gt;Footer&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;

Cheers,
Jeff

rudy23 · Feb 26, 2004

Thanks man.

But other than changing show to hide and hide to show the code doesnt seem to work. U sure u pasted the right one.

BabyJeffy · Feb 26, 2004

Once I removed the weird invisible characters from the copy-paste, it worked fine in my copy of IE at home. I'll do the same from work on a Windows IE tomorrow morning and let you know the result... hopefully that's all there is to it.

Jeff

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hide/Show Jsp generated tables using Javascript? (screenshot) 1

rudy23

Programmer

simonchristieis

Programmer

BabyJeffy

Programmer

rudy23

Programmer

BabyJeffy

Programmer

rudy23

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor