Hiding rows in a table via <div>

F

F. Da Costa

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=='block') ? '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>
 
6

620

F. Da Costa said:
What I'm trying to do here is simultaneously hide 1 or more rows

Any suggestions appreciated.
Click to expand...

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

F. Da Costa

620 said:
You may not need div's at all. The tr and table elements support the
visibility property, so you could just use that.
Click to expand...
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
 
D

DU

F. Da Costa said:
Following is a snippet of html in which I hide a whole table and try to
hide a single row.
Click to expand...

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>
Click to expand...

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=='block') ? 'none': 'block';
}

</script>
</head>

<body>

<div style="display: block" id="divTable">
<table border="1">
<div style="display: block" id="divRow">
Click to expand...

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>
Click to expand...

Try:

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

<br>
Click to expand...

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

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

Michael Winter

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).
Click to expand...

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
 
6

620

F. Da Costa said:
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.
Click to expand...

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

F. Da Costa

Michael said:
F. Da Costa wrote on 03 Dec 2003:




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.
Click to expand...
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).
Click to expand...
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
 
F

F. Da Costa

620 said:
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:
Click to expand...
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
Filter table rows based on multiple checkboxes value 2
Getting extra blank rows from appending HTML..? 2
Can't execute php to delete multiple rows in database 3
I want to Display Excel As HTML In js 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help with code 0
Image shifts to the right when export the page to pdf 4

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 320

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top