Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > hide tables rows

Reply
Thread Tools

hide tables rows

 
 
Dautkhanov@gmail.com
Guest
Posts: n/a
 
      01-23-2007
Hello all !

I have my own library for web-design building - active forms, lists. I
am going
to build tabbing component. The complexity in this process
is that all web forms uniformed and are built as TABLEs, where
each field is TR. Tabs have to show/hide some of table rows.

I don't know how TR's properties must be changed in order to hide them
all.
I tried make HTML code like
<TR>...</TR>
....
<DIV id=tab1>
<TR>...</TR>
....
</DIV>
<TR>...</TR>
....

And tried to change visibility of a DIV, but this doesn't work.
How can I change visibility of set of TRs?

Thanks

 
Reply With Quote
 
 
 
 
Cylix
Guest
Posts: n/a
 
      01-23-2007
If you are working for tabs, table formatting is not a common(good)
pratice.
You may find some example on using unorder list / div / span.

 
Reply With Quote
 
 
 
 
marss
Guest
Posts: n/a
 
      01-23-2007

http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

> And tried to change visibility of a DIV, but this doesn't work.
> How can I change visibility of set of TRs?


Hi,
It is simple if you know which rows you want to hide/show.
Here is the example:

<html>
<head>
<script>
function changeVisibility(show)
{
var rows = document.getElementById("tbl").rows;
for(var i=0;i<rows.length;i++)
if (i==1 || i==2 || i==3)
rows[i].style.display = show ? "" : "none";
}
</script>
</head>
<body>
<table id="tbl">
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
<input type="button" onclick="changeVisibility(true)" value="Show
Rows">
<input type="button" onclick="changeVisibility(false)" value="Hide
Rows">
</body>
</html>

 
Reply With Quote
 
Dautkhanov@gmail.com
Guest
Posts: n/a
 
      01-24-2007
> function changeVisibility(show)
> {
> var rows = document.getElementById("tbl").rows;
> for(var i=0;i<rows.length;i++)
> if (i==1 || i==2 || i==3)
> rows[i].style.display = show ? "" : "none";}

Thanks. That will be very helpful.

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-24-2007


On Jan 23, 6:55 pm, "marss" <(E-Mail Removed)> wrote:
> (E-Mail Removed) wrote:
> > And tried to change visibility of a DIV, but this doesn't work.
> > How can I change visibility of set of TRs?Hi,

> It is simple if you know which rows you want to hide/show.
> Here is the example:
>
> <html>
> <head>
> <script>
> function changeVisibility(show)
> {
> var rows = document.getElementById("tbl").rows;
> for(var i=0;i<rows.length;i++)
> if (i==1 || i==2 || i==3)
> rows[i].style.display = show ? "" : "none";}</script>


Consider the simplicity of a toggle:

function toggleDisplay(el) {
if (typeof el == 'string') el = document.getElementById(el);
el.style.display = ('none' == el.style.display)? '' : 'none';
}


> </head>
> <body>
> <table id="tbl">
> <tr><td>0</td></tr>
> <tr><td>1</td></tr>
> <tr><td>2</td></tr>
> <tr><td>3</td></tr>
> <tr><td>4</td></tr>
> </table>
> <input type="button" onclick="changeVisibility(true)" value="Show
> Rows">
> <input type="button" onclick="changeVisibility(false)" value="Hide
> Rows">


That would be much simpler if the rows to hide/show were enclosed in
their own tbody element:

<table id="tbl">
<tr><th>0
<tbody id="tb01">
<tr><td>1<tr><td>2<tr><td>3<tr><td>4
</tbody>
</table>

<input type="button" onclick="toggleDisplay('tb01');"
value="Hide/show rows">

To prevent the "yo-yo" effect it may be better to toggle the visibility
instead.


--
Rob

 
Reply With Quote
 
Dautkhanov@gmail.com
Guest
Posts: n/a
 
      01-25-2007
On 24 ., 14:10, "RobG" <(E-Mail Removed)> wrote:
> Consider the simplicity of a toggle:
>
> function toggleDisplay(el) {
> if (typeof el == 'string') el = document.getElementById(el);
> el.style.display = ('none' == el.style.display)? '' : 'none';
> }

Wow! That will be great simplicity in this task.


> That would be much simpler if the rows to hide/show were enclosed in
> their own tbody element:
>
> <table id="tbl">
> <tr><th>0
> <tbody id="tb01">
> <tr><td>1<tr><td>2<tr><td>3<tr><td>4
> </tbody>
> </table>
> To prevent the "yo-yo" effect it may be better to toggle the visibility
> instead.


Rob, what do you mean by "yo-yo" effect?

Anyway, thanks

 
Reply With Quote
 
 
 
Reply

Thread Tools

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 On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Hide the Gridview Rows and Header rows in Button click VijayRama ASP .Net 2 10-12-2009 01:58 PM
[HIDE LAN] Hide a part of hosts into the LAN at VPN users? Paolo Bresi Cisco 1 04-04-2005 02:41 PM
collapsible tables: how to hide table rows in that testcase (IE failsto render ok, Moz,Op fine) Marek Mnd Javascript 5 06-27-2004 04:19 PM
trying to use <div> to hide a bunch of table rows David ASP .Net 4 05-21-2004 10:15 AM
How to hide table rows and show them when user click a different row? RA ASP .Net 1 02-19-2004 10:53 PM



Advertisments