472,804 Members | 989 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > hiding rows in a table via <div>

Join Bytes to post your question to a community of 472,804 software developers and data experts.

Hiding rows in a table via <div>

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
8 23913
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
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
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
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
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
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
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
New Post

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
Space between <p>...</p> and <div>...</div> blocks
by: Daniel Hansen | last post by:
I know this must seem totally basic and stupid, but I cannot find any reference that describes how to control the spacing between <p>...</p> and <div>...</div> blocks. When I implement these on a...
HTML / CSS
61
How to do a <table> with <div> tag
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...
HTML / CSS
7
Positioning table elements with CSS <div> tags
by: Herbman | last post by:
Hi, I'm trying to position a <tr> ("row") element with CSS. The table itself is positioned with <div> tags. The problem is when I use <div> tags to position the rows within the table nothing...
HTML / CSS
2
how to achieve identical layouts achieved by <table> using <div>
by: listaction | last post by:
Hi Folks, can you help me by explaining how the code below can be translated using <div> and achieve the same effect? Thanks, LA <html> <body> <table bgcolor="#000000" width="100%"...
HTML / CSS
3
<label><div></div></label> allowed?
by: Josef K. | last post by:
Asp.net generates the following html when producing RadioButton lists: <td><input id="RadioButtonList_3" type="radio" name="MyRadioButtonList" value="644"...
ASP.NET
13
<TABLE> vs. <DIV> when and where
by: Davo | last post by:
Hi Folks, There seems to be something about not using tables for layout, but use divs instead. I'm not sure if I've got this right. If the output looks like what you want, then it shouldn't...
HTML / CSS
2
Hiding <DIV> containing <INPUT> tags onmouseout
by: Richard Maher | last post by:
Hi, I'm trying to use the Visibility Style attribute for a Div to effectively PopUp a lightweight window with some additional context-sensitive information, when a user mouses over a given...
Javascript
12
vertical position of wide <table> in 3 column <div> css
by: slartybartfast | last post by:
I'm new(ish) to css, comfortable using tables, but trying real hard to move away. Please see http://84.9.125.31/developer/css_test/test5.html NB This issue is with IE & Opera - I've tried IE...
HTML / CSS
2
isladogs
Access Europe meeting on Wed 2 August - An Access Developer Guide to creating applications in Blazor
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
Microsoft Access / VBA
0
linyimin
Speedup your spring application
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
General
0
Steps manually installing IntelliJ IDEA.
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
General
2
isladogs
Access Europe meeting on Wed 6 Sept - Database Analyzer and other tools
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
Microsoft Access / VBA
0
How to insert a new record in a database
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
DB2 Database
14
DJRhino1175
Cancel Print Action if Sub form has No Records
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
Microsoft Access / VBA
0
Python code for finding the longest common subsequence
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
Python
0
React to native button blinking effect
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
Software Development
0
How does React native implement an English player?
by: lllomh | last post by:
How does React native implement an English player?
Mobile Development

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!