Hide Tables by Id

itHighway · April 21st, 2005, 10:26 PM

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.

joefawcett · April 22nd, 2005, 08:55 AM

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)

Lrnmore · April 22nd, 2005, 09:04 AM

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

richard.york · April 22nd, 2005, 01:35 PM

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

itHighway · April 23rd, 2005, 12:28 AM

Thank you all for replying to my post.

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

Regards
Zeeshan Ahmed
itHighway Technologies