Show/Hide Table Rows in Webpage

Giganews Newsgroups
Subject: Show/Hide Table Rows in Webpage
Posted by:  pmind (pmaslan…@aol.com)
Date: Mon, 5 Oct 2009

Hello All,

I have an existing webpage which contains a table of projects. One of
the table fields contains the status of the project (open or closed).
My goal is create a script to show/hide the completed project rows,
making it visually simpler for the user, and to initiate the script
with a single button click at the top of the table. I have succeeded
only in being able to show/hide the first row that I identified in the
code; any additional rows identified are not affected. Can anyone tell
me how I might modify this code to create the effect I=92m looking for?
I=92m not opposed to a new approach, but it would be nice to tweek what
I=92ve already done if possible. I should point out that I am, at best,
a novice programmer. Here is the code I=92ve added:

(just above the table)
<script type=3D"text/javascript">
function displayRow(){
var row =3D document.getElementById("statusCompleted");
if (row.style.display =3D=3D '')  row.style.display =3D 'none';
else row.style.display =3D '';
}
</script>

(at each appropriate table row)
<tr id=3D"statusCompleted">

(at the button)
onclick=3D "displayRow()">

I would be grateful for any help you can provide. Thanks, Paul

Replies