469,631 Members | 1,798 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,631 developers. It's quick & easy.

hide tables rows

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

Jan 23 '07 #1
5 1927
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.

Jan 23 '07 #2

Da********@gmail.com 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>

Jan 23 '07 #3
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.

Jan 24 '07 #4


On Jan 23, 6:55 pm, "marss" <m...@ukr.netwrote:
Dautkha...@gmail.com 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

Jan 24 '07 #5
On 24 ., 14:10, "RobG" <r...@iinet.net.auwrote:
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

Jan 25 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Harry | last post: by
2 posts views Thread by Mark | last post: by
10 posts views Thread by oLE | last post: by
1 post views Thread by le_sloth | last post: by
11 posts views Thread by jimstruckster | last post: by
2 posts views Thread by Scamjunk | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.