Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 21st, 2005, 10:26 PM
Friend of Wrox
 
Join Date: Oct 2004
Location: , , .
Posts: 198
Thanks: 2
Thanked 0 Times in 0 Posts
Send a message via MSN to itHighway
Default Hide Tables by Id

Hello!


I have a list of HTML tables. Each table has a unique id.

<table id="tbl1"><tr><td></td></table>
<table id="tbl252"><tr><td></td></table>
<table id="tbl31"><tr><td></td></table>
<table id="tbl214"><tr><td></td></table>
<table id="tbl234"><tr><td></td></table>
<table id="tbl484"><tr><td></td></table>
<table id="tbl500"><tr><td></td></table>

There is a button which onClick hides and unHides the tables using their unique id. Currently the script behind that button is


for(i=0;i<=500;i++){
Hide All tables statement..... OR UnHide All tables Statment......

}


The javascript statement is working but it has to loop 500 time just to Hide/Unhide few tables.

Is it possible to access the tables just by the first 3 characters (i.e tbl) of their table id.

Reply With Quote
  #2 (permalink)  
Old April 22nd, 2005, 08:55 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Unless you know what the ids are in advance and store them in an array I think you're out of luck. The code below maybe more efficient:
Code:
function setTableVisibility(Show) //Show is true to show, false to hide
{
  var sVisibility = (Show ? "visible" : "hidden");
  var colTables = document.getElementsByTagName("table");
  for (var i = 0; i < colTables.length; i++)
  {
    var oTable = colTables[i];
    if (oTable.id && oTable.id.indexOf("tbl") == 0)
    {
      oTable.style.visibility = sVisibility;
    }
  }
}

--

Joe (Microsoft MVP - XML)
Reply With Quote
  #3 (permalink)  
Old April 22nd, 2005, 09:04 AM
Registered User
 
Join Date: Feb 2005
Location: Memphis, TN, USA.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Here's something that might give you some ideas, you can also play with
style attributes of "visibility" if you don't like the "display" approach.

Display uses block, inline, none
Visibility uses visible, hidden

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Table Tester</title>

<style>
table { display: block; }
</style>

<script>

function ckTable(id){
var el = document.getElementById(id);
(el.style.display == 'none')? el.style.display = 'block' : el.style.display = 'none';
}

</script>
</head>
<body>
<table id="t1" border="1" width="120">
<tr>
<th colspan="2">Table 1</th>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
</table>
<p />
<table id="t2" border="1" width="120">
<tr>
<th colspan="2">Table 2</th>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
</table>
<p />
<table id="t3" border="1" width="120">
<tr>
<th colspan="2">Table 3</th>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
</table>

<input type="button" value="Toggle T1" onclick="ckTable('t1')">
<input type="button" value="Toggle T2" onclick="ckTable('t2')">
<input type="button" value="Toggle T3" onclick="ckTable('t3')">

</body>
</html>

google:
javacsript display:none

and

javascript visibility:hidden

For more examples if you like.


HTH
Lrnmore
Reply With Quote
  #4 (permalink)  
Old April 22nd, 2005, 01:35 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Just wanted to point out that tables are not block elements, they're table elements. So applying display: block; to a <table> could have unexpected reprecussions (though I haven't tried this myself, so I don't know for sure).

Explorer doesn't support the "table" display value. So you might want to wrap each table in a <div>, if you go the display property route.

http://www.w3.org/TR/CSS21/visuren.html#display-prop

The difference between the display property and the visibility property, you'll soon see is that the display: none; declaration makes the element as though it doesn't exist at all, whereas the visibility: hidden; declaration causes the space that element would occupy to remain open, only the element is invisible.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
Reply With Quote
  #5 (permalink)  
Old April 23rd, 2005, 12:28 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: , , .
Posts: 198
Thanks: 2
Thanked 0 Times in 0 Posts
Send a message via MSN to itHighway
Default

Thank you all for replying to my post.

I used Joe script and it worked for me - Thanks Joe


Regards
Zeeshan Ahmed
itHighway Technologies

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to insert 2 tables with same auto increment ID ibrhaim ASP.NET 1.0 and 1.1 Basics 1 December 7th, 2006 05:00 PM
'this.ID = id;' in class construction holf BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 0 October 6th, 2006 10:58 AM
Can We Hide or Disable Tables so It cannot be Open vivek_inos Access 1 December 8th, 2005 08:56 AM
why not index.asp?id=1 can be www.myweb.com/?id=1 BurhanKhan Classic ASP Professional 11 September 6th, 2004 02:06 PM
write to 2 tables using same id. mikeuk PHP Databases 5 July 22nd, 2004 09:16 AM



All times are GMT -4. The time now is 11:11 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.