Show/Hide Table Rows in Webpage

[pmind]

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

 

[Martin Honnen]

(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.

 

[Evertjan.]

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

 

[DonO]

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).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.

 

[pmind]

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

 

[Thomas 'PointedEars' Lahn]

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

 

[Evertjan.]

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:

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.]

Thomas 'PointedEars' Lahn wrote on 05 okt 2009 in comp.lang.javascript:

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.]

Stefan Weiss wrote on 06 okt 2009 in comp.lang.javascript:

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.

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.

 

[pmind]

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

 

[Evertjan.]

Stefan Weiss wrote on 06 okt 2009 in comp.lang.javascript:

Well, if you ignore the specs, you can write whatever you like, just
don't call the result valid HTML.

Wrong.

You cannot write whatever you like,
if you want the user to experience what you intent him to do.

Even if it is valid html, the browser might not follow the specs.

BTW, this is not about HTML only, this is the Javascript NG.

Specs.

Specs are there to help you, not to be deified.

 

[Evertjan.]

pmind wrote on 06 okt 2009 in comp.lang.javascript:

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

(in the header)
function toggleElement(x) {
var myTable = document.getElementById('table1')

You do not use myTable, so why put it here?

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"

This is exactly why you should use
var myTable = document.getElementById('table1')
Not al browser have the silly ideas of IE.

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

<tr id="2">

An id shopud begin with a letter.

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

I think you should try a working minimalistic code:

Try thids first as a seperate test.html without altering.
Tested working on Google Chrome.

=============================================

<script type='text/javascript'>
var myTable;

function whenLoaded(){
myTable = document.getElementById('table1')
};

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

function toggleRow(t,e) {
toggleElement(t.rows[e]);
};
</script>


<body onload='whenLoaded()'>

<table id='table1' border=1>
<tr><td>this is row:<td>1
<tr><td>this is row:<td>2
<tr><td>this is row:<td>3
<tr><td>this is row:<td>4
<tr><td>this is row:<td>5
<tr><td>this is row:<td>6
</table>
<p>
<button onclick='toggleRow(myTable,2-1)'>
toggle row 2</button>
<p>
<button onclick='toggleRow(myTable,4-1)'>
toggle row 4</button>
<p>
<button onclick='toggleRow(myTable,6-1)'>
toggle row 6</button>

=============================================

 

[pmind]

Evertjan,

I tried out the test.html code above, and it does work; but this is
not exactly what I'm trying to achieve.

I want a single button that will toggle visibility and colapse, all of
the rows I choose in the code. Normal state shows all rows. Clicking
one button hides all completed project rows; or vice-versa. And as I
am becomming more confused with each post, I would like to do this as
simply as possible.

My original code accomplished this for only the first row I marked
with an ID. I just need to apply this same principal to multiple rows.
As I said, I am clearly not an experienced programmer, nor do I have
time to become one. But I am a pretty good mimic, so I'm just trying
to adapt what I see on the fly, however I'm running out of time to
devote to this task.

To that end, and based on the code I originally posted; is there any
way to modify this code so that it works with multiple rows in a
table?

Thank you for you patience, Paul.

 

[Osmo Saarikumpu]

Evertjan. kirjoitti:

An id shopud begin with a letter.

Not shopud! MUST!

 

[Evertjan.]

pmind wrote on 06 okt 2009 in comp.lang.javascript:

Evertjan,

I tried out the test.html code above, and it does work; but this is
not exactly what I'm trying to achieve.

That is what I thought.

But I also thought it must[!] be an insult to your intelligence to do all
the programming for you.

I want a single button that will toggle visibility and colapse, all of
the rows I choose in the code. Normal state shows all rows. Clicking
one button hides all completed project rows; or vice-versa. And as I
am becomming more confused with each post, I would like to do this as
simply as possible.

My example was to teach you one possible way to achieve what it did, so
please peruse the three functions till you know exactly what they do,
changing small things and see what happens.

My original code accomplished this for only the first row I marked
with an ID. I just need to apply this same principal to multiple rows.

That should be simple.
Try and show some examples of your work, and show where they go wrong if
they do.

As I said, I am clearly not an experienced programmer, nor do I have
time to become one.

Oh, but that does not mean that we should do your work.
That would be mean to you as you can learn so much from this little
exersize in logic called programming.

But I am a pretty good mimic, so I'm just trying
to adapt what I see on the fly, however I'm running out of time to
devote to this task.

As I said, that argument has no effect in this NG, it is not a paid
helpdesk.

It is not the task that I was helping you with, but the way you can learn
from it.

To that end, and based on the code I originally posted; is there any
way to modify this code so that it works with multiple rows in a
table?

Simple programming will do.

How do you do three different things in a script function?

Thank you for you patience, Paul.

Thank you for yours.

 

[Thomas 'PointedEars' Lahn]

Evertjan. kirjoitti:

Not shopud! MUST!

LOL


PointedEars

 

[Evertjan.]

Thomas 'PointedEars' Lahn wrote on 07 okt 2009 in comp.lang.javascript:

LOL

You both seem to lack any understanding of Kwazulu!

 

[pmind]

Evertjan,

With your help, I have succeeded in incorporating function into the
webpage.
The only question I still have is; how do I hide more than one row
with a single
button? I've tried using various delimiters in the string without much
luck.

(on this line)
<button onclick='toggleRow(myTable,2-1)'>

(tried)
<button onclick='toggleRow(myTable,2-1,3-1)'>
-only hides row 2, not 2 & 3

(and)
<button onclick='toggleRow(myTable,2-1;3-1)'>
-does nothing at all

But, still no joy. Any ideas? Should I take a different approach?
Once again, thanks.

 

[Evertjan.]

pmind wrote on 07 okt 2009 in comp.lang.javascript:

Evertjan,

With your help, I have succeeded in incorporating function into the
webpage.
The only question I still have is; how do I hide more than one row
with a single
button? I've tried using various delimiters in the string without much
luck.

(on this line)
<button onclick='toggleRow(myTable,2-1)'>

Do you understansd why i wrote 2-1 and not just 1 ?

(tried)
<button onclick='toggleRow(myTable,2-1,3-1)'>

Was my function toggleRow() defined to use 3 parameters?

I think not

-only hides row 2, not 2 & 3

(and)
<button onclick='toggleRow(myTable,2-1;3-1)'>
-does nothing at all

A script language is not like a natural language where you can just play
with idiom and others will still understand!

But, still no joy. Any ideas? Should I take a different approach?
Once again, thanks.

There are a miriad of solutions

You could rewrite the toggleRow() function,

You could just call toggleRow() thre times with different parameters.

You could write a new function calling toggleRow() three times with
different parameters.

etc, etc, etc.

Progress from the point where you just want to use otherman's scripts,
and try your hand at your own, using valid Javascript and not plain
English idiom.

 

[pmind]

Back were I started; a complete waste of 2 days. Poor form, indeed.