Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Show/Hide Table Rows in Webpage

Reply
Thread Tools

Show/Hide Table Rows in Webpage

 
 
pmind
Guest
Posts: n/a
 
      10-05-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ím looking for?
Iím not opposed to a new approach, but it would be nice to tweek what
Iíve already done if possible. I should point out that I am, at best,
a novice programmer. Here is the code Iíve added:

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

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

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

I would be grateful for any help you can provide. Thanks, Paul
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      10-05-2009
pmind wrote:

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


An id attribute value should be unique in the complete document so you
can't have several elements with the same id.

If your table rows you want to hide/show together are adjacent in the
table then simply put them into one tbody, give that tbody a unique id
and use your script with that tbody.

If the rows are not adjacent then you need some other way to identity
them and find them with your script. Setting the class attribute could
be one way, then loop through the rows collection of your table and look
at the className property of each row object to decide whether it is one
of the rows you want to show/hide.



--

Martin Honnen
http://msmvps.com/blogs/martin_honnen/
 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      10-05-2009
pmind wrote on 05 okt 2009 in comp.lang.javascript:

> Iíve already done if possible. I should point out that I am, at best,
> a novice programmer. Here is the code Iíve added:
>
> (just above the table)


scripts should be in the header, if they just define a function

> <script type="text/javascript">
> function displayRow(){


The function is a toggle, not display
appropriate function naming is essential for later debugging.

> var row = document.getElementById("statusCompleted");
> if (row.style.display == '') row.style.display = 'none';
> else row.style.display = '';
>}


Use:

function toggleElement(x) {
x.style.display =
(x.style.display =='') ?'none' : '';
}

> </script>


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


id must be unique

try:

var myTable = document.getElementById('myTable')

onclick = 'toggleElement(myTable.row[17])'

for row nr 17, not tested


> (at the button)
> onclick= "displayRow()">
>
> I would be grateful for any help you can provide. Thanks, Paul




--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
DonO
Guest
Posts: n/a
 
      10-05-2009
On Oct 5, 10:37*am, pmind <(E-Mail Removed)> wrote:
> 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ím looking for?
> Iím not opposed to a new approach, but it would be nice to tweek what
> Iíve already done if possible. I should point out that I am, at best,
> a novice programmer. Here is the code Iíve added:
>
> (just above the table)
> <script type="text/javascript">
> function displayRow(){
> var row = document.getElementById("statusCompleted");
> if (row.style.display == '') *row.style.display = 'none';
> else row.style.display = '';}
>
> </script>
>
> (at each appropriate table row)
> <tr id="statusCompleted">
>
> (at the button)
> onclick= "displayRow()">
>
> I would be grateful for any help you can provide. Thanks, Paul



I've built the following....

function show_hide(inShowItems, inHideItems){

if(inShowItems != ''){
var sItems = inShowItems.split(",");
for (var i = 0; i < sItems.length; i++) {
document.getElementById(sItems[i]).style.display=''; }
}
if(inHideItems != ''){
var hItems = inHideItems.split(",");
for (var j = 0; j < hItems.length; j++) {
document.getElementById(hItems[j]).style.display='none'; }
}
}

You call is like so... show_hide('show','hide');

for multiple items to show/hide, separate with a comma and NO SPACE
like ('show,these,items')

HTH
D.
 
Reply With Quote
 
pmind
Guest
Posts: n/a
 
      10-05-2009
Evertjan,

Many thanks for the helpful suggestions. I've moved the script into
the header and modified it as suggested. However, I'm not sure I
understand this bit correctly:

> var myTable = document.getElementById('myTable')

Where does this belong? Inside or outside of the script?

> onclick = 'toggleElement(myTable.row[17])'
> for row nr 17, not tested

The onclick belongs with the button, no problem there;
but what is the reference to row 17? Is this just a
random example of a row number?

Although there is only one table on the page currently,
do I need to add a statement defining which table I'm referring to?

Thanks again, Paul
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-05-2009
Martin Honnen wrote:

> pmind wrote:
>> (at each appropriate table row)
>> <tr id="statusCompleted">

>
> An id attribute value should be unique in the complete document so you
> can't have several elements with the same id.


s/should/MUST/


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      10-05-2009
pmind wrote on 05 okt 2009 in comp.lang.javascript:

> Evertjan,
>
> Many thanks for the helpful suggestions. I've moved the script into
> the header and modified it as suggested. However, I'm not sure I
> understand this bit correctly:
>
>> var myTable = document.getElementById('myTable')

> Where does this belong? Inside or outside of the script?


It is javascript,
so putting it outside the script would only show the html text.

I hope you mean inside or outside the function.

It must be inside the function if the script is above the table,
[or you should put it in a onload type function]
because it can only find the table if that table then exists in the DOM.


>> onclick = 'toggleElement(myTable.row[17])'
>> for row nr 17, not tested

> The onclick belongs with the button, no problem there;
> but what is the reference to row 17? Is this just a
> random example of a row number?


An example.

I am not at all clear what you want to do, but specifying the row must be
one of the things you want to do if you want to change the display mode.

> Although there is only one table on the page currently,
> do I need to add a statement defining which table I'm referring to?


Yes, you need to have a reference to a table if you want to use row
number identification.

A document does not have rows,
a div does not have rows,
how is the script to know what DOM element you mean?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      10-05-2009
Thomas 'PointedEars' Lahn wrote on 05 okt 2009 in comp.lang.javascript:

> Martin Honnen wrote:
>
>> pmind wrote:
>>> (at each appropriate table row)
>>> <tr id="statusCompleted">

>>
>> An id attribute value should be unique in the complete document so you
>> can't have several elements with the same id.

>
> s/should/MUST/


No, you only should not.

You can easily put in a number of same id-ed DOM elements,
and wait for the error recovery of the different browsers to do something,
like perhapse only seeing the top id, but you should not do that,
because it is a silly thing to do.

Doing silly things is even tautologically silly, but not forbidden.

Perhaps the German words "muss" and "sol" did put you off,
like they usually do to me in the other direction?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      10-06-2009
Stefan Weiss wrote on 06 okt 2009 in comp.lang.javascript:

>> No, you only should not.

>
> Actually, if you want the document to be valid (X)HTML, id attribute
> values "MUST" be unique.


>| id = name [CS]
>| This attribute assigns a name to an element. This name must be
>| unique in a document.
>
> [quoted from the HTML 4.01 specs]
>
>> You can easily put in a number of same id-ed DOM elements,
>> and wait for the error recovery of the different browsers to do
>> something,

>
> That UAs can use error correction on invalid markup is a good thing;
> it was probably one of the deciding factors for the enormous growth
> rate of the WWW. That doesn't change the current specification,
> though.


A spec saying "must" does not mean that you as a programmer, must
follow those specs, but only that you should.

Ihe idea is, that IF you follow those specs, THEN and only then you MUST
use only use unique ids.

>> Perhaps the German words "muss" and "sol" did put you off,
>> like they usually do to me in the other direction?

>
> Thomas's use of upper case "MUST" is not unusual in technical
> descriptions. There's even an RFC defining the terminology:
> http://www.ietf.org/rfc/rfc2119.txt


Usenet is not a technical spec.

> The typical pitfall for German (and possibly Dutch?) native speakers


Stefan, you SHOULD not assume about the Dutch language.

> is that "must" translates to "muss", but "must not" doesn't mean the
> same thing as "muss nicht". These so-called "false friend" expressions
> have the potential to create unintentional hilarity (as in: I must not
> go to the toilet, and even if I do, I must not pay the toilet
> attendants).


English has "have to", often quite unlike "habe zu".

The hilarity level among our transponders would amount to a shameful
silence, they just have to powder their noses in the bathroom now and
then.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
pmind
Guest
Posts: n/a
 
      10-06-2009
Not sure about much of the above, but...

Evertjan,

>I hope you mean inside or outside the function.

Sorry, I did mean the function. I told you I was a novice!

>I am not at all clear what you want to do, but specifying the row must be
>one of the things you want to do if you want to change the display mode.


The purpose of the code is to show/hide rows with completed projects,
so yes,
you are correct. I will add the row numbers manually into the code as
each
project ends (they are long-term projects, so they don't change very
often).

I now have the following code; does this look at all right?

(in the header)
function toggleElement(x) {
var myTable = document.getElementById('table1')
x.style.display =
(x.style.display =='') ?'none' : '';
}
> </script>


(in the button)
onclick ="toggleElement(table1.row[2])"

Using row 2 as an example in this case.

(at the table)
id="table1"

My next question is, don't I have to identify each
row of the table with something like:

<tr id="2">

As the code doesn't yet work, I'm clearly missing something!

Thanks again, Paul
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
table.rows vs. table.getElementsByTagName (+ a regex question) eBob.com Javascript 5 05-20-2008 10:58 AM
New to ASP: Read SQL user table output results in a table on a ASP webpage matching search field Yas ASP .Net 0 08-01-2007 04:02 PM
script for moving rows up and down and traverse thru rows of HTML table Subba Rao via DotNetMonster.com ASP .Net 0 03-19-2005 06:46 AM
Table/table rows/table data tag question? Rio HTML 4 11-05-2004 08:11 AM
Help ASP; get last inserted value from one table, insert multiple rows in another table. PT ASP General 1 10-07-2004 07:27 AM



Advertisments