HTML Forum

**marcobranco1975** · 11-06-2010, 06:09 AM

Boas

Eu tenho este código

Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>

&lt;script type="text/javascript">

function poorman_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
</script>

</head>
<body>

<div>
<table border="1">
<tr id="trGrpHeader1">
<td width="100"><span onclick="java script:poorman_toggle('Row1');">Row 1</span></td>
<td width="100"><span onclick="java script:poorman_toggle('Row2');">Row 2</span></td> 
<td width="100"><span onclick="java script:poorman_toggle('Row3');">Row 3</span></td> 
</tr>
<tr id="Row1">
<td width="100">  Row1 - Data</td>
<td width="100" class="number">1</td>
<td width="100" class="number">4</td>
</tr>
<tr id="Row2">
<td>  Row 2 - Data</td>
<td class="number">2</td>
<td class="number">5</td>
</tr>
<tr id="Row3">
<td>  Row 3 - data</td>
<td class="number">3</td>
<td class="number">6</td>
</tr>
</table>
</div>
</body>
</html>

Question:

How could i hide data rows on the startup of the page (when i load the page), and show only the headder?

Marco

**Physicsguy** · 11-06-2010, 11:22 AM

With javascript, and then a nice jQuery rolldown ?

**Mug** · 11-06-2010, 12:21 PM

I like using jQuery for this sort of thing. There are probably more streamlined ways of doing this but there is a brief tutorial at:

http://api.jquery.com/hide/

hope that helps.

**jonmufc** · 11-08-2010, 03:56 AM

I think you can use CSS. (display : none)

hope this helps.

Thanks

**sean1984** · 11-08-2010, 08:29 PM

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<script type="text/javascript">
function poorman_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
</script>
</head>
<body>
<div>
<table border="1">
<tr id="trGrpHeader1">
<td width="100"><span onClick="javascript:poorman_toggle('Row1');">Row 1</span></td>
<td width="100"><span onClick="javascript:poorman_toggle('Row2');">Row 2</span></td> 
<td width="100"><span onClick="javascript:poorman_toggle('Row3');">Row 3</span></td> 
</tr>
<tr id="Row1" style="display:none;">
<td width="100">  Row1 - Data</td>
<td width="100" class="number">1</td>
<td width="100" class="number">4</td>
</tr>
<tr id="Row2"  style="display:none;">
<td>  Row 2 - Data</td>
<td class="number">2</td>
<td class="number">5</td>
</tr>
<tr id="Row3"  style="display:none;">
<td>  Row 3 - data</td>
<td class="number">3</td>
<td class="number">6</td>
</tr>
</table>
</div>
</body>
</html>

OR

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"  language="javascript"></script>
<script>
$(document).ready(function(){
  $('#Row1,#Row2,#Row3').hide();
});
</script>
</head>
<body>
<div>
<table border="1">
<tr id="trGrpHeader1">
<td width="100"><span onClick="$('#Row1').show();">Row 1</span></td>
<td width="100"><span onClick="$('#Row2').show();">Row 2</span></td> 
<td width="100"><span onClick="$('#Row3').show();">Row 3</span></td> 
</tr>
<tr id="Row1" >
<td width="100">  Row1 - Data</td>
<td width="100" class="number">1</td>
<td width="100" class="number">4</td>
</tr>
<tr id="Row2" >
<td>  Row 2 - Data</td>
<td class="number">2</td>
<td class="number">5</td>
</tr>
<tr id="Row3" >
<td>  Row 3 - data</td>
<td class="number">3</td>
<td class="number">6</td>
</tr>
</table>
</div>
</body>
</html>

**maheshadodis** · 11-10-2010, 02:34 AM

Quote:

Originally Posted by marcobranco1975

Boas

Eu tenho este código

Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>

&lt;script type="text/javascript">

function poorman_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
</script>

</head>
<body>

<div>
<table border="1">
<tr id="trGrpHeader1">
<td width="100"><span onclick="java script:poorman_toggle('Row1');">Row 1</span></td>
<td width="100"><span onclick="java script:poorman_toggle('Row2');">Row 2</span></td> 
<td width="100"><span onclick="java script:poorman_toggle('Row3');">Row 3</span></td> 
</tr>
<tr id="Row1">
<td width="100">  Row1 - Data</td>
<td width="100" class="number">1</td>
<td width="100" class="number">4</td>
</tr>
<tr id="Row2">
<td>  Row 2 - Data</td>
<td class="number">2</td>
<td class="number">5</td>
</tr>
<tr id="Row3">
<td>  Row 3 - data</td>
<td class="number">3</td>
<td class="number">6</td>
</tr>
</table>
</div>
</body>
</html>

Question:

How could i hide data rows on the startup of the page (when i load the page), and show only the headder?

Marco

Hi,
you can use timer on onload() event you can set the timer after loading the page timer starts and then when timer finish its execution load ur table this what can do if u want ur table to automatically load after page load if u want to load table manually u can write function for on click event to load table

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!