• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 314
  • Last Modified:

hiding table initially and displaying it when clicked on a hyperlink in html page



Hi

My HTMl page is having a table with 2 colums and 5 rows and it has some content in it. but I want to hide this table untill the user clicks on the showtable hyperlink. This hyperlink should show the table below the hyperlink in the same page itself, instead of opening a new page. If the user doesnt  click the hyperlink the table should not be visible.

I am trying with onClick ="somefunct()" for the hyperlink but donno how to disable the table and enable the table inside the "somefunc()"

Is there any way to disable the table. let me know...  

Thanks
0
pacchureddy
Asked:
pacchureddy
  • 4
2 Solutions
 
BatalfCommented:
<script>
function showHideTable(linkObj){
    var obj = document.getElementById('myTable');
    if(obj.style.display=='none'){
        obj.style.display='block';
        linkObj.innerHTML = 'Hide table';        
    }else{
        obj.style.display='none';
        linkObj.innerHTML = 'Show table';
    }

}
</style>
<a href="#" onclick="showHideTable(this)">Show table</a>
<table id="myTable">
<tr><td><p>Row 1</td><td><p>Row 1</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
</table>
0
 
BatalfCommented:
WIthout errors:-)

<script>
function showHideTable(linkObj){
    var obj = document.getElementById('myTable');
    if(obj.style.display=='none'){
        obj.style.display='block';
        linkObj.innerHTML = 'Hide table';        
    }else{
        obj.style.display='none';
        linkObj.innerHTML = 'Show table';
    }

}
</script>
<a href="#" onclick="showHideTable(this)">Show table</a>
<table id="myTable" style="display:none">
<tr><td><p>Row 1</td><td><p>Row 1</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
</table>
0
 
archrajanCommented:
u shud have return false

<a href="#" onclick="showHideTable(this);return false;">Show table</a>
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
BatalfCommented:
Thank you!

Yes, the return false; I usual seem to forget that.

<script>
function showHideTable(linkObj){
    var obj = document.getElementById('myTable');
    if(obj.style.display=='none'){
        obj.style.display='block';
        linkObj.innerHTML = 'Hide table';        
    }else{
        obj.style.display='none';
        linkObj.innerHTML = 'Show table';
    }

}
</script>
<a href="#" onclick="showHideTable(this);return false">Show table</a>
<table id="myTable" style="display:none">
<tr><td><p>Row 1</td><td><p>Row 1</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
</table>
0
 
pacchureddyAuthor Commented:
wow that is cool...

but I have many tables not just one.. and I have given this code in my html soo its hiding the first table whose id is myTable what abt the other tables......  can you just remodify a bit so that all the tables would be hidden...

thanks
0
 
BatalfCommented:
This is the same code for 3 tables:


<script>
function showHideTable(linkObj,tableObj){
    var obj = document.getElementById(tableObj);
    if(obj.style.display=='none'){
        obj.style.display='block';
        linkObj.innerHTML = 'Hide table';        
    }else{
        obj.style.display='none';
        linkObj.innerHTML = 'Show table';
    }

}
</script>
<a href="#" onclick="showHideTable(this,'myTable');return false">Show table</a><br>
<table id="myTable" style="display:none">
<tr><td><p>Row 1</td><td><p>Row 1</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
</table>
<a href="#" onclick="showHideTable(this,'myTable2');return false">Show table</a><br>
<table id="myTable2" style="display:none">
<tr><td><p>Row 1</td><td><p>Row 1</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
</table>
<a href="#" onclick="showHideTable(this,'myTable3');return false">Show table</a><br>
<table id="myTable3" style="display:none">
<tr><td><p>Row 1</td><td><p>Row 1</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
<tr><td><p>Second row</td><td><p>Row 2</td></tr>
</table>
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now