show/hide a table row

O

oLE

I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.

I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE
 
W

WindAndWaves

oLE said:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.

I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE

Hi Ole

Have a look at www.corstorphinehouse.com/d/avail.html, it is a bit
complicated, but it may help you...
 
R

RobB

oLE said:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.

I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">

body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}

</style>
<script type="text/javascript">
//<![CDATA[

function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}

//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>

Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this...
http://www.blooberry.com/indexdot/css/properties/classify/display.htm
 
O

oLE

RobB said:
oLE said:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls
the

javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become
incredibly

frustrated because i went ahead thinking it was going to be like C.

its not.
I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want
to

reference the element via its relationship to the hyperlink that
calls

the javascript, i know this can be done. You see there will be
several

tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">

body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}

</style>
<script type="text/javascript">
//<![CDATA[

function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}

//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>

Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this...
http://www.blooberry.com/indexdot/css/properties/classify/display.htm

thanks for your help RobB and WindAndWaves, i'll give these a go.

oLE
 
M

Michael Winter

[snip]
document.getElementById("row").style.display = "inline"; // shows row

If you did do that, you'd almost certainly have problems.

Table rows are not inline elements. They're closer to block elements but
they have their own display value: table-row. However, as IE doesn't
support that (it incorrectly uses block), it is best not to specify a
value at all. Instead, assign an empty string to remove the inline style
causing the page stylesheet to take effect.

As a side-effect, this will enforce something that should happen anyway:
you must not hide the row initially using CSS. The reason for this is that
users without the necessary scripting support will never be able to see
the row. Instead, hide the row via scripting.
but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript

Unless you actually tell us what that relationship is - preferably by
linking to the document in question - it's difficult to give you anything
useful.

[snip]

Mike
 
O

oLE

RobB said:
oLE said:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls
the

javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become
incredibly

frustrated because i went ahead thinking it was going to be like C.

its not.
I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want
to

reference the element via its relationship to the hyperlink that
calls

the javascript, i know this can be done. You see there will be
several

tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">

body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}

</style>
<script type="text/javascript">
//<![CDATA[

function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}

//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>

Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this...
http://www.blooberry.com/indexdot/css/properties/classify/display.htm

RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide, it
needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE
 
R

RobB

oLE wrote:

(snip)
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide, it
needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE


Addl. CSS:

..contract {
display: none;
}
..expand {
[anything but display]
}
td a img {
border: none;
}
..preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}


JS:

function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}


HTML:

<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....

...............
...............

Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:eek:[email protected]">Email.........


googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.
 
O

oLE

RobB said:
oLE wrote:

(snip)

RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide,
it

needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE



Addl. CSS:

.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}


JS:

function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}


HTML:

<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....

..............
..............

Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:eek:[email protected]">Email.........


googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.

http://www.olespace.com/test.htm

working. if is still does the same when i add in the php and stuff then
i'm more than happy. thank you so much for all your help rob, i really
appreciate it, you have saved my life here. I'll make sure the source
code credits you.

oLE
 
O

oLE

oLE said:
RobB said:
oLE wrote:

(snip)

RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide,

it

needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE




Addl. CSS:

.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}



JS:

function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}


HTML:

<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"

/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....

..............
..............

Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"

/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:eek:[email protected]">Email.........


googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.

http://www.olespace.com/test.htm

working. if is still does the same when i add in the php and stuff then
i'm more than happy. thank you so much for all your help rob, i really
appreciate it, you have saved my life here. I'll make sure the source
code credits you.

oLE

sorry for double post but you might want to look at www.olespace.com and
then click rants on the nav bar to see it in proper working action.
can't get the pluses to turn to minuses but to be honest i don't care.

oLE
 
R

RobB

oLE said:
oLE said:
RobB said:
oLE wrote:

(snip)


RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide,


it

needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE




Addl. CSS:

.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
http://www.olespace.com/test.htm

working. if is still does the same when i add in the php and stuff then
i'm more than happy. thank you so much for all your help rob, i really
appreciate it, you have saved my life here. I'll make sure the source
code credits you.

oLE

sorry for double post but you might want to look at www.olespace.com and
then click rants on the nav bar to see it in proper working action.
can't get the pluses to turn to minuses but to be honest i don't care.

oLE

Yes you do....

See this?
...............
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
...............

It's what switches the icon's src. Obviously, it's set up for that
demo, with its folder images ('folder.gif', 'folderopen.gif'). You'll
need to change it for those new pix:

node1.src = (/plus/.test(node1.src)) ?
node1.src.replace(/plus/, 'minus') :
node1.src.replace(/minus/, 'plus');

Just guessing that the other image is
'http://www.olespace.com/gfx/minus.gif'. Also - this CSS should be...

..preload {
background-image: url(http://www.olespace.com/gfx/minus.gif);
}

....as it's designed solely to preload the alternate image. hth
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top