473,394 Members | 1,960 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 473,394 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 23948
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
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server

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 © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!