Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Hiding rows in a table via <div>

Reply
Thread Tools

Hiding rows in a table via <div>

 
 
F. Da Costa
Guest
Posts: n/a
 
      12-03-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).

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>

 
Reply With Quote
 
 
 
 
620
Guest
Posts: n/a
 
      12-04-2003
"F. Da Costa" <(E-Mail Removed)> wrote in message
news:3fce4537$0$201$(E-Mail Removed)4all.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>


 
Reply With Quote
 
 
 
 
F. Da Costa
Guest
Posts: n/a
 
      12-04-2003
620 wrote:

> "F. Da Costa" <(E-Mail Removed)> wrote in message
> news:3fce4537$0$201$(E-Mail Removed)4all.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>
>
>


 
Reply With Quote
 
DU
Guest
Posts: n/a
 
      12-04-2003
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>
>


 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      12-04-2003
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
http://www.velocityreviews.com/forums/(E-Mail Removed)d (remove ".invalid" to reply)
 
Reply With Quote
 
620
Guest
Posts: n/a
 
      12-04-2003

"F. Da Costa" <(E-Mail Removed)> wrote in message
news:3fce9042$0$205$(E-Mail Removed)4all.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>


 
Reply With Quote
 
F. Da Costa
Guest
Posts: n/a
 
      12-04-2003
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
>


 
Reply With Quote
 
GIMME
Guest
Posts: n/a
 
 
Reply With Quote
 
F. Da Costa
Guest
Posts: n/a
 
      12-05-2003
620 wrote:

> "F. Da Costa" <(E-Mail Removed)> wrote in message
> news:3fce9042$0$205$(E-Mail Removed)4all.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>
>
>


 
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
Hiding rows in an ASP.NET table chris f ASP .Net 2 06-11-2008 07:13 AM
Hiding table rows at run time in vb.net Garg ASP .Net 2 02-15-2007 08:00 AM
Hiding table rows .asp luna ASP .Net 0 01-17-2007 09:08 AM
hiding table rows by id? MattB ASP .Net 2 03-09-2005 06:36 PM
Table/table rows/table data tag question? Rio HTML 4 11-05-2004 08:11 AM



Advertisments