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!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

show/hide tables

Status
Not open for further replies.
bernard87

bernard87

Technical User
Apr 1, 2008
1
GB
hello! if any one could help it would be ace. I have a number of tables on one page.(2 at present more later) I would like however to use this javascript function to only display one table on the page. to display the other tables I would like to simply click a heading. I have wrote this code so far but it isn't working. just started learning all this stuff so quite puzzled out to why it isn't working.
cheers
andy

<html>
<head>
<title>deals</title>
<script type="text/javascript">
<!--
function showHide(_myObj,_action) {
var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
if (_action == 'show') {
_myTableObj.style.display = 'block';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHide(this,\'hide\');">Hide Table</a>';
}
if (_action == 'hide') {
_myTableObj.style.display = 'none';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHide(this,\'show\');">Show Table</a>';
}
}
//-->
</script>
</head>
<body>
<div id="tableID1_Div"><a href="#" onclick="showHide(this,'hide');">Hide Table</a></div>
<table id="tableID1" style="display:block;">
<table align=center border="1" width="80%" height="60%">
<caption>High end Tariffs</caption>
<tr align=center>
<th>Network</th>
<th>Tariff</th>
<th>Price per month</th>
<th>Contract length (months)</th>
<th>Inclusive mintutes</th>
<th>Inclusive texts</th>
<th>Voicemail</th>
</tr>
<tr align=center>
<td>Orange <a href=" border="0" src="</a>
</td>
<td>Panther</td>
<td>£75.00</td>
<td>18</td>
<td>1500</td>
<td>Unlimited</td>
<td>Free</td>
</tr>
<tr align=center>
<td>Orange <a href=" border="0" src="</a>
</td>
<td>Panther</td>
<td>£75</td>
<td>12</td>
<td>1100</td>
<td>200</td>
<td>Free</td>
</tr>
<tr align=center>
<td>O2 <a href=" border="0" src="</a>
</td>
<td>Anytime</td>
<td>£80</td>
<td>12</td>
<td>£3000</td>
<td>£500</td>
<td>Free</td>
</tr>
<tr align=center>
<td>T-Mobile <a href=" border="0" src="</a>
</td>
<td>Flext</td>
<td>£75</td>
<td>18</td>
<td>Up to 1950</td>
<td>Up to 3900</td>
<td>12p</td>
</table>

<div id="tableID2_Div"><a href="#" onclick="showHide(this,'show');">Show Table</a></div>
<table id="tableID2" style="display:none;">
<table align=center border="1" width="80%" height="60%">
<caption>Low end Tariffs</caption>
<tr align=center>
<th>Network</th>
<th>Tariff</th>
<th>Price per month</th>
<th>Contract length (months)</th>
<th>Inclusive mintutes</th>
<th>Inclusive texts</th>
<th>Voicemail</th>
</tr>
<tr align=center>
<td>Orange <a href=" border="0" src="</a>
</td>
<td>Dolphin</td>
<td>£25.00</td>
<td>12</td>
<td>75</td>
<td>200</td>
<td>12p</td>
</tr>
<tr align=center>
<td>O2 <a href=" border="0" src="</a>
</td>
<td>Anytime</td>
<td>£25.00</td>
<td>£12 months</td>
<td>50</td>
<td>100</td>
<td>20p</td>
</tr>
<tr align=center>
<td>T-Mobile <a href=" border="0" src="</a>
</td>
<td>Flext</td>
<td>£25.00</td>
<td>12 months</td>
<td>Up to £150</td>
<td>Up to £300</td>
<td>12p</td>
</tr>
<tr align=center>
<td>Virgin Mobile <a href=" border="0" src="</a>
</td>
<td>Anytime</td>
<td>£25.00</td>
<td>18 months</td>
<td>150</td>
<td>150</td>
<td>free</td>
</tr>
<tr align=center>
<td>3 <a href=" border="0" src="</a>
</td>
<td>Mix and Match</td>
<td>£27.00</td>
<td>18 months</td>
<td>Up to 1400</td>
<td>Up to 1100</td>
<td>Free</td>
</tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
By setting the same "Name" attribute to all your tables, you can get them in javascript by the following code :
Code: 
    var allTables = document.getElementsByName("myTablesName");
Using this and setting a specific id to every table, you can automatically hide all the tables except the one whose id is given in parameter like this :
Code: 
function showHide(myObjId) {
    var allTables = document.getElementsByName("myTablesName");
    var curtable=null;
    for (var i=0;i<allTables.length; i++) {
       curtable = allTables[i];
       if (curtable.id == myObjId) {
         curtable.style.display = 'block';
       } else {
         curtable.style.display = 'none';
       }
    }
}

The HTML code for yourt tables should then look like this (only 2 simplified tables displayed, same for other. Just take care to change Id vor each table).
Code: 
<div><a href="#" onclick="showHide("tableID1");">Show Table</a></div>
<table name="myTablesName" id="tableID1" style="display:block;">
<tr align=center>
    <th>Network</th>
</tr>
<tr align=center>
    <td>Orange</td>
</tr>
</table>

<div><a href="#" onclick="showHide("tableID2");">Show Table</a></div>
<table name="myTablesName" id="tableID2" style="display:none;">
<tr align=center>
    <th>Network</th>
</tr>
<tr align=center>
    <td>Orange</td>
</tr>
</table>

By the way, I noticed some errors in your HTML Code :
You can't put a "table" tag just inside another table. These lines are wrong :
Code: 
<table id="tableID1" style="display:block;">
[COLOR=red]<table align=center border="1" width="80%" height="60%">[/color]

You have to close well your tags (end of first table) :
Code: 
   <td>Up to 3900</td>
    <td>12p</td>
[COLOR=red]<!-- missing </tr> here -->[/color]
</table>


Water is not bad as long as it remains outside human body ;-)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
712
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
668
xwb
xwb
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
145
chrisjchrisj
chrisjchrisj
chelares
  • Locked
  • Question
Issues with Tables
Replies
2
Views
129
Offera
Offera
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
386
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top