We help IT Professionals succeed at work.

Drill-Down on a HTML page

DavidDunn
DavidDunn asked
on
1,091 Views
Last Modified: 2007-12-19
Hi,

Can anyone help with this. I want to develop a HTML report page that will be emailed to a number of managers. The information contained in the HTML page is like that shown below consisting of a 'week' summary totals line and detail lines for each day of the week.

      Audio      Books      CDs      DVDs      Posters      Video
STORE 1
 Week       33      53      29      25      30      31
  Mon      3      8      6      4      4      3
  Tue      10      20      2      2      1      9
  Wed      3      9      5      8      8      4      
  Thur      9      3      9      5      4      4
  Fri      3      5      7      6      5      4
  Sat      5      8      0      0      8      7
STORE 2
 Week       32      33      22      21      40      12
  .......
  .......
  etc.

What I want to do is only display the week totals line and allow the the user to 'drill-down' so when they click on the week the day detail line will expand/contract as the week line is clicked.

Does anyone have some example HTML/javascript that would allow this?

Thanks.
Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Is there any way of having it to scroll smoothly - a bit like OpenCube's web effects slidetree?
DavidDunn,
Dunno, what's web effects slidetree?
You can probably do exactly what you want with the appropriate tools. The code in the above link works for me, and apparently for the member who asked that question. It should at least give you a pointer or two on your way. Sorry however if it's not what you want.

.. Alan
This should get you started:

<html>
<head>
      <title>Untitled</title>
</head>
<body>
<table border=1>
<tr><td>1</td><td>1</td></tr>
<tr id="myTR"><td>1</td><td>2</td></tr>
<tr><td>3</td><td>1</td></tr>
</table>
<br>
<input type="button" value="Hide Row 1st example" onclick="document.getElementById('myTR').style.display = 'none';">
<input type="button" value="Show Row 1st example" onclick="document.getElementById('myTR').style.display = 'inline';">

<br><br>
<input type="button" value="Hide Row 2nd example" onclick="document.getElementById('myTR').style.visibility = 'hidden';">
<input type="button" value="Show Row 2nd example" onclick="document.getElementById('myTR').style.visibility = 'visible';">
</body>
</html>
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
MaB

Commented:
Was struggling with this and SquareHead put me on the right track. Thanks.
Only combining what SquareHead and ADSaunders already stated so I don't want to take all the cred if you like this solution.

<html>

<head>
<style>
#toggle1      {
             display:none;
             }
#toggle2      {
             display:none;
             }
</style>
<script language="JavaScript">
function show(id){     
      document.getElementById(id).style.display = 'inline';
      }
</script>
<script language="JavaScript">
function hide(id){     
      document.getElementById(id).style.display = 'none';
      }
</script>
</head>

<body>
<table>
  <tr>
    <td width="50">&nbsp;</td>
    <td width="50">Audio</td>
    <td width="50">Books</td>
    <td width="50">CD's</td>
    <td width="50">DVD's</td>
    <td width="50">Posters</td>
    <td width="50">Video</td>
  </tr>
</table>
<table>
  <tr>
    <td colspan="4">STORE 1</td>
    <td colspan="4" align="right">
<p><a href="#" onClick="show('toggle1');">Show details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onClick="hide('toggle1');">Hide details</a></p>
    </td>
  </tr>
  <tr>
    <td width="50">Week</td>
    <td width="50">33</td>
    <td width="50">53</td>
    <td width="50" colspan="2">29</td>
    <td width="50">25</td>
    <td width="50">30</td>
    <td width="50">31</td>
  </tr>
</table>
<div id="toggle1">
<table>
  <tr>
    <td width="50">Mon</td>
    <td width="50">3</td>
    <td width="50">8</td>
    <td width="50">6</td>
    <td width="50">4</td>
    <td width="50">4</td>
    <td width="50">3</td>
  </tr>
  <tr>
    <td width="50">Tue</td>
    <td width="50">10</td>
    <td width="50">20</td>
    <td width="50">2</td>
    <td width="50">2</td>
    <td width="50">1</td>
    <td width="50">9</td>
  </tr>
  <tr>
    <td width="50">Wen</td>
    <td width="50">3</td>
    <td width="50">9</td>
    <td width="50">5</td>
    <td width="50">8</td>
    <td width="50">8</td>
    <td width="50">4</td>
  </tr>
  <tr>
    <td width="50">Thu</td>
    <td width="50">9</td>
    <td width="50">3</td>
    <td width="50">9</td>
    <td width="50">5</td>
    <td width="50">4</td>
    <td width="50">4</td>
  </tr>
  <tr>
    <td width="50">Fri</td>
    <td width="50">3</td>
    <td width="50">5</td>
    <td width="50">7</td>
    <td width="50">6</td>
    <td width="50">5</td>
    <td width="50">4</td>
  </tr>
  <tr>
    <td width="50">Sat</td>
    <td width="50">5</td>
    <td width="50">8</td>
    <td width="50">0</td>
    <td width="50">0</td>
    <td width="50">8</td>
    <td width="50">7</td>
  </tr>
</table>
</div>
<table>
  <tr>
    <td colspan="4">STORE 2</td>
    <td colspan="4" align="right">
<p><a href="#" onClick="show('toggle2');">Show details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onClick="hide('toggle2');">Hide details</a></p>
    </td>
  </tr>
  <tr>
    <td width="50">Week</td>
    <td width="50">32</td>
    <td width="50">33</td>
    <td width="50">22</td>
    <td width="50">22</td>
    <td width="50">40</td>
    <td width="50">12</td>
  </tr>
</table>
<div id="toggle2">
<table>
  <tr>
    <td width="50">Mon</td>
    <td width="50">3</td>
    <td width="50">8</td>
    <td width="50">6</td>
    <td width="50">4</td>
    <td width="50">4</td>
    <td width="50">3</td>
  </tr>
  <tr>
    <td width="50">Tue</td>
    <td width="50">10</td>
    <td width="50">20</td>
    <td width="50">2</td>
    <td width="50">2</td>
    <td width="50">1</td>
    <td width="50">9</td>
  </tr>
  <tr>
    <td width="50">Wen</td>
    <td width="50">3</td>
    <td width="50">9</td>
    <td width="50">5</td>
    <td width="50">8</td>
    <td width="50">8</td>
    <td width="50">4</td>
  </tr>
  <tr>
    <td width="50">Thu</td>
    <td width="50">9</td>
    <td width="50">3</td>
    <td width="50">9</td>
    <td width="50">5</td>
    <td width="50">4</td>
    <td width="50">4</td>
  </tr>
  <tr>
    <td width="50">Fri</td>
    <td width="50">3</td>
    <td width="50">5</td>
    <td width="50">7</td>
    <td width="50">6</td>
    <td width="50">5</td>
    <td width="50">4</td>
  </tr>
  <tr>
    <td width="50">Sat</td>
    <td width="50">5</td>
    <td width="50">8</td>
    <td width="50">0</td>
    <td width="50">0</td>
    <td width="50">8</td>
    <td width="50">7</td>
  </tr>
</table>
</div>
</body>

</html>

BR MaB
MaB

Commented:
You probably want to lose some of the &nbsp; 's between the links since they are mocking up the table alignment. Forgot that before pasting the code.
hey, that's pretty cool MaB

Commented:
well, just one point. Javascript is dissabled in most mail cients. if true, that won't work.

Attaching an HTML file isn't a solution, because many places block attached HTMLs.

the only way is to put a link in your e-mail, or forget the hidding and showing of elements in your mail.
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
MaB

Commented:
-canedhien

Thanks!

-Pajaro

Even cooler! ;-)

BR MaB

Author

Commented:
Brilliant!

That is exactly what I needed.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.