hide tables rows

Dautkhanov · Jan 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

Cylix · Jan 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.

marss · Jan 23, 2007

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.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>

Dautkhanov · Jan 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.style.display = show ? "" : "none";}

Thanks. That will be very helpful.

RobG · Jan 24, 2007

[email protected] said:
[email protected] said:

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

Click to expand...

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.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">

Click to expand...

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.

Dautkhanov · Jan 25, 2007

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

Only one table shows up with the information	2	Mar 29, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Sort by number of characters	1	Nov 2, 2023
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
I want to Display Excel As HTML In js	2	Feb 24, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
I need help making a zooming function	11	Dec 14, 2021
Help with code	0	Jun 12, 2022

hide tables rows

Dautkhanov

Cylix

marss

Dautkhanov

RobG

Dautkhanov

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads