Wrox Programmer Forums
|
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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 21st, 2005, 10:26 PM
Friend of Wrox
 
Join Date: Oct 2004
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.

 
Old April 22nd, 2005, 08:55 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
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)
 
Old April 22nd, 2005, 09:04 AM
Registered User
 
Join Date: Feb 2005
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
 
Old April 22nd, 2005, 01:35 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
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
 
Old April 23rd, 2005, 12:28 AM
Friend of Wrox
 
Join Date: Oct 2004
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






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





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.