By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,128 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > hiding rows in a table via <div>
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

Hiding rows in a table via <div>

P: n/a
Following is a snippet of html in which I hide a whole table and try to
hide a single row.

Here is my question (plz don't chew my head off if its css related instead):
Why does the divTable <div> Hide/Show work but not the divRow version?

What I'm trying to do here is simultaneously hide 1 or more rows
(possibly with nested divs as well).
This would allow for an elegant an well performing base for an html base
treetable (but I guess that's not relevant).

Any suggestions appreciated.

TIA
Fermin DCG
<html>
<head>
<script>

function show(obj) {
document.getElementById(obj).style.display =
(document.getElementById(obj).style.display=='bloc k') ? 'none': 'block';
}

</script>
</head>

<body>

<div style="display: block" id="divTable">
<table border="1">
<div style="display: block" id="divRow">
<tr><td>Hide / Show row</td></tr>
</div>
<tr><td>Do nothing row</td></tr>
</table>
</div>

<br>
<input type="button" onclick="show('divTable')" value="Hide/Show table">
<input type="button" onclick="show('divRow')" value="Hide/Show Row">

</body>
</html>

Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies
P: n/a
620
"F. Da Costa" <da*****@xs4all.nl> wrote in message
news:3f*********************@news.xs4all.nl...
What I'm trying to do here is simultaneously hide 1 or more rows

Any suggestions appreciated.


You may not need div's at all. The tr and table elements support the
visibility property, so you could just use that.

Ex: This doesn't hide the table, but it could. It will show/hide row1 and
row2 on demand. If you don't like the scruch-up/expand effect, take out the
..position stuff. This has the added bonus of doin gaway with the
'getElementById' method, which, while a very very very handy method, I
believe it has some compatibility issues with the little guys. Anyway here
goes:

<html><head>

<script language=javascript>

function hideOrShow(obj)
{
if (obj.style.visibility == 'visible') {
hide(obj);
}
else {
show(obj);
}
}

function show(obj)
{
obj.style.visibility = 'visible';
obj.style.position = 'relative';
}

function hide(obj)
{
obj.style.visibility = 'hidden';
obj.style.position = 'absolute';
}

</script></head>

<body>

<table border=1>
<tr id=tr1 style="visibility:visible; position:relative;">
<td>Hi I live in tr1</td>
</tr>
<tr id=tr2 style="visibility:visible; position:relative;">
<td>Hi I live in tr2</td>
</tr>
</table>

<input type=button onclick="hideOrShow(tr1)" value="Hide/Show row1">
<input type=button onclick="hideOrShow(tr2)" value="Hide/Show row2">

</body></html>
Jul 20 '05 #2
P: n/a
620 wrote:
"F. Da Costa" <da*****@xs4all.nl> wrote in message
news:3f*********************@news.xs4all.nl...
What I'm trying to do here is simultaneously hide 1 or more rows

Any suggestions appreciated.

You may not need div's at all. The tr and table elements support the
visibility property, so you could just use that.

That is not exactly the issue
I'm not having any worries with the rows on their own.
The catch lies in a treetable whereby rows are grouped together within
some branch.
I figured that working at branch level made more sense opposed to
iterating through *all* the rows every time. Just imagine a really large
treetable with a lot of branches opening and closing all the time.

That is where the div came in, as an 'group encapsulator' that would
allow me to handle whole branch blocks.

Though I do appreciate your effort I'm afraid its not what I'm after.

Thx
Ex: This doesn't hide the table, but it could. It will show/hide row1 and
row2 on demand. If you don't like the scruch-up/expand effect, take out the
..position stuff. This has the added bonus of doin gaway with the
'getElementById' method, which, while a very very very handy method, I
believe it has some compatibility issues with the little guys. Anyway here
goes:

<html><head>

<script language=javascript>

function hideOrShow(obj)
{
if (obj.style.visibility == 'visible') {
hide(obj);
}
else {
show(obj);
}
}

function show(obj)
{
obj.style.visibility = 'visible';
obj.style.position = 'relative';
}

function hide(obj)
{
obj.style.visibility = 'hidden';
obj.style.position = 'absolute';
}

</script></head>

<body>

<table border=1>
<tr id=tr1 style="visibility:visible; position:relative;">
<td>Hi I live in tr1</td>
</tr>
<tr id=tr2 style="visibility:visible; position:relative;">
<td>Hi I live in tr2</td>
</tr>
</table>

<input type=button onclick="hideOrShow(tr1)" value="Hide/Show row1">
<input type=button onclick="hideOrShow(tr2)" value="Hide/Show row2">

</body></html>


Jul 20 '05 #3
P: n/a
DU
F. Da Costa wrote:
Following is a snippet of html in which I hide a whole table and try to
hide a single row.

visibility:collapse
would fit your quest here but no browser supports this property value
correctly for now.

http://www.w3.org/TR/CSS2/tables.html#dynamic-effects
Here is my question (plz don't chew my head off if its css related
instead):
Why does the divTable <div> Hide/Show work but not the divRow version?

What I'm trying to do here is simultaneously hide 1 or more rows
(possibly with nested divs as well).
This would allow for an elegant an well performing base for an html base
treetable (but I guess that's not relevant).

Any suggestions appreciated.

TIA
Fermin DCG
<html>
Your markup code as edited is invalid. You should first validate it
before going any further.
<head>
<script>

function show(obj) {
document.getElementById(obj).style.display =
(document.getElementById(obj).style.display=='bloc k') ? 'none': 'block';
}

</script>
</head>

<body>

<div style="display: block" id="divTable">
<table border="1">
<div style="display: block" id="divRow">
Right here, you have invalid markup code. You can not have a div inside
a table like that.
<tr><td>Hide / Show row</td></tr>
Try:

<tr style="display:table-row;" id="idTRow"><td></td></tr>

</div>
<tr><td>Do nothing row</td></tr>
</table>
</div>

<br>
<form action="">
<p> <input type="button" onclick="show('divTable')" value="Hide/Show table">
<input type="button" onclick="show('divRow')" value="Hide/Show Row">
<input type="button" onclick="show('idTRow')" value="Hide/Show Row">
</p>
</form>

(...)

You would need to adjust the show function in order to detect if the
calling element is a div or a table row. You would need to be able to
toggle the display from "table-row" to "none" and vice versa.

DU

</body>
</html>


Jul 20 '05 #4
P: n/a
F. Da Costa wrote on 03 Dec 2003:
Following is a snippet of html in which I hide a whole table and
try to hide a single row.

Here is my question (plz don't chew my head off if its css
related instead): Why does the divTable <div> Hide/Show work but
not the divRow version?

What I'm trying to do here is simultaneously hide 1 or more rows
(possibly with nested divs as well).
This would allow for an elegant an well performing base for an
html base treetable (but I guess that's not relevant).


There is a simple reason for why this doesn't work: it's illegal.
From the Strict DTD (it's the same in Transitional), abridged:

<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

The element names in parentheses are the allowed contents of the
TABLE element. Once you get to TD elements, you can start including
anything that's classed as a block-level or inline element, but not
before.

However, you might be pleased to know that the plus after TBODY in
the list above means that you can include one or /more/ TBODY
elements. You can use them to perform your row grouping and hide or
show them (use the display property, with none and table-row-group).

Mike

--
Michael Winter
M.******@blueyonder.co.uk.invalid (remove ".invalid" to reply)
Jul 20 '05 #5
P: n/a
620

"F. Da Costa" <da*****@xs4all.nl> wrote in message
news:3f*********************@news.xs4all.nl...
That is not exactly the issue
I'm not having any worries with the rows on their own.
The catch lies in a treetable whereby rows are grouped together within
some branch.


A row can *be* a branch. When hiding a row becomes analogous to hiding a
branch, we simply rely on the hierarchical nature of nested tables to do the
thinking for us, and life gets a lot less complex:

<html><head>

<script language=javascript>

function hideOrShow(obj)
{
if (obj != null) {
if (obj.style.visibility != 'hidden') {
hide(obj);
}
else {
show(obj);
}
}
}

function show(obj)
{
obj.style.visibility = '';
obj.style.position = 'relative';
}

function hide(obj)
{
obj.style.visibility = 'hidden';
obj.style.position = 'absolute';
}

</script></head>

<body>

<table id=nodeTOP cellpadding=5 border=1 width=100%>
<tr id=node0>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: node 0
</td>
</tr>
<tr id=node0_0>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: node 0_0
</td>
</tr>
<tr id=node0_0_0>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: node 0_0_0
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr id=node0_1>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: 0_1
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr id=node1>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: 1
</td>
</tr>
<tr id=node1_0>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: 1_0
</td>
</tr>
</table>
</td>
</tr>
<tr id=node1_1>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: 1_1
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Manipulate Node: <input type=text id=txtNode value="0_0_0"><br>
<input type=button onclick="hideOrShow(getElementById('node' +
txtNode.value))" value="Do it">

</body></html>
Jul 20 '05 #6
P: n/a
Michael Winter wrote:
F. Da Costa wrote on 03 Dec 2003:

Following is a snippet of html in which I hide a whole table and
try to hide a single row.

Here is my question (plz don't chew my head off if its css
related instead): Why does the divTable <div> Hide/Show work but
not the divRow version?

What I'm trying to do here is simultaneously hide 1 or more rows
(possibly with nested divs as well).
This would allow for an elegant an well performing base for an
html base treetable (but I guess that's not relevant).

There is a simple reason for why this doesn't work: it's illegal.
From the Strict DTD (it's the same in Transitional), abridged:

<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

The element names in parentheses are the allowed contents of the
TABLE element. Once you get to TD elements, you can start including
anything that's classed as a block-level or inline element, but not
before.

Read that approx 45m after my post on htmlhelp.com.

However, you might be pleased to know that the plus after TBODY in
the list above means that you can include one or /more/ TBODY
elements. You can use them to perform your row grouping and hide or
show them (use the display property, with none and table-row-group). Yep, I figured that out and it indeed works (to a certain extend) because (it looks like) nested tbodies are not allowed.
Which is fair enough if you think about it. However, it does force one to come up with some alternate (prob js) strategy
to handle tree behaviour (which is inherently nested).
Yes one could go for js trees etc but I'm looking for something more html'ish (lets say it is a matter of taste).

Thx for the replies, appreciated,

Fermin DCG

Mike


Jul 20 '05 #7
P: n/a
620 wrote:
"F. Da Costa" <da*****@xs4all.nl> wrote in message
news:3f*********************@news.xs4all.nl...
That is not exactly the issue
I'm not having any worries with the rows on their own.
The catch lies in a treetable whereby rows are grouped together within
some branch.

A row can *be* a branch. When hiding a row becomes analogous to hiding a
branch, we simply rely on the hierarchical nature of nested tables to do the
thinking for us, and life gets a lot less complex:

Thx for the example using a colspan in the <td> above the table def and a <colgroup> also makes it look good with >1 cols.
Also I had to replace the visibility & hidden by display and none.
And had to take out the position stuff also.

The latter worked ok in IE 5+ but stuffed up (to remain civilized) Mozilla (Gecko engine).
Guess I have to figure out a work around here.

Thx again.

Fermin DCG

<html><head>

<script language=javascript>

function hideOrShow(obj)
{
if (obj != null) {
if (obj.style.visibility != 'hidden') {
hide(obj);
}
else {
show(obj);
}
}
}

function show(obj)
{
obj.style.visibility = '';
obj.style.position = 'relative';
}

function hide(obj)
{
obj.style.visibility = 'hidden';
obj.style.position = 'absolute';
}

</script></head>

<body>

<table id=nodeTOP cellpadding=5 border=1 width=100%>
<tr id=node0>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: node 0
</td>
</tr>
<tr id=node0_0>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: node 0_0
</td>
</tr>
<tr id=node0_0_0>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: node 0_0_0
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr id=node0_1>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: 0_1
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr id=node1>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: 1
</td>
</tr>
<tr id=node1_0>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: 1_0
</td>
</tr>
</table>
</td>
</tr>
<tr id=node1_1>
<td>
<table cellpadding=5 border=1 width=100%>
<tr>
<td>
Data: 1_1
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Manipulate Node: <input type=text id=txtNode value="0_0_0"><br>
<input type=button onclick="hideOrShow(getElementById('node' +
txtNode.value))" value="Do it">

</body></html>


Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Question stats

  • viewed: 23613
  • replies: 8
  • date asked: Jul 20 '05
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates