Problems toggling style.display values

G

Gunnar

Hello, I am running into problems with a simple function which should
change the style.display properties from 'block' to 'none'. I am able
to change them from 'none' to 'block' as expected.

Any suggestions are appreciated.

The Javascript:

function toggleTable(id){
var allTables = document.getElementsByTagName('table');

for(var iCount=1; iCount < allTables.length + 1; iCount++){
document.getElementById(id).style.display = "none"; // turn all
tables off
}

document.getElementById(id).style.display = "block"; //then simply turn
on the passed table id
}

The body:
<a onclick="toggleTable('table_1')">Press me</a>

<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; display: none" bordercolor="#111111"
width="100%" id="table_1">
<tr>
<td width="50%">Test</td>
<td width="50%">Test</td>
</tr>
</table>
 
M

Mick White

Gunnar said:
Hello, I am running into problems with a simple function which should
change the style.display properties from 'block' to 'none'. I am able
to change them from 'none' to 'block' as expected.

Any suggestions are appreciated.

The Javascript:

function toggleTable(id){
var allTables = document.getElementsByTagName('table');


for(var iCount=1; iCount < allTables.length + 1; iCount++){
Click to expand...

for(var iCount=0; iCount < allTables.length; iCount++){


document.getElementById(id).style.display = "none"; // turn all
tables off
}
Click to expand...

allTables[iCount].style.display = "none"; // turn all tables off
}

document.getElementById(id).style.display = "block"; //then simply turn
on the passed table id
}
Click to expand...

document.getElementById(id).style.display = "";
//turn on the passed table id
}

Mick
 
G

Gunnar

Thank you for your kind suggestions. I must be missing something
simple as the following html should turn off both tables then turn on
table_1. The alert shows that the function is being called correctly,
but the tables are both still visible. Any other suggestions? Thanks
in advance!

<html>
<head>

<script type="text/javascript">

function toggleTable(id){
var allTables = document.getElementsByTagName('table');

for(var iCount=0; iCount < allTables.length; iCount++){
allTables[iCount].style.display == 'none';
}

document.getElementById(id).style.display == "";

alert(id +' should be the only one visible now');
}
</script>

</head>

<body>

<a onclick="toggleTable('table_1')">Press here to call toggleTable
function</a>

<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="100%"
id="table_1">
<tr>
<td width="50%">Table 1</td>
<td width="50%">Table 1</td>
</tr>
</table>

<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="100%"
id="table_2">
<tr>
<td width="50%">Table 2</td>
<td width="50%">Table 2</td>
</tr>
</table>

</body>

</html>
 
E

Evertjan.

Gunnar wrote on 27 okt 2005 in comp.lang.javascript:
<script type="text/javascript">

function toggleTable(id){
var allTables = document.getElementsByTagName('table');

for(var iCount=0; iCount < allTables.length; iCount++){
allTables[iCount].style.display == 'none';
Click to expand...

allTables[iCount].style.display = 'none';
}

document.getElementById(id).style.display == "";
Click to expand...

document.getElementById(id).style.display = "";
alert(id +' should be the only one visible now');
}
</script>
Click to expand...
[..]
 
E

Evertjan.

Evertjan. wrote on 27 okt 2005 in comp.lang.javascript:
Gunnar wrote on 27 okt 2005 in comp.lang.javascript:
Click to expand...

Why not do it with className and for(i in ...)?

<style>
..t {display:none;}
</style>

<script type="text/javascript">
function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables) tables.className = 't';
document.getElementById(id).className = '';
}
</script>


<a onclick="toggleTable('table1')">
Press here</a>

<table id="table1">
<tr>
<td>Table 1</td><td>Table 1</td>
</tr>
</table>

<table id="table2">
<tr>
<td>Table 2</td><td>Table 2</td>
</tr>
</table>
 
E

Evertjan.

Evertjan. wrote on 27 okt 2005 in comp.lang.javascript:
<script type="text/javascript">
function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables) tables.className = 't';
document.getElementById(id).className = '';
}
</script>
Click to expand...


Even nicer, IMHO:

function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables)
tables.className = (tables.id!=id)?'t':'';
}
 
M

Michael Winter

On 27/10/2005 17:23, Evertjan. wrote:

[Iterating HTMLCollection]
Why not do it with className and for(i in ...)?
Click to expand...

Just how thoroughly did you test that idea?

In IE, the length property of the collection is enumerated, in addition
to the Node properties. In Fx, the item and namedItem properties are
also enumerated.

Only built-in objects have their enumeration behaviour specified. Host
objects are free to respond any way they like, from enumerating nothing,
to everything.

Using indices is (always?) preferable when it achieves the intended goal.

[snip]

Mike
 
M

Matt Kruse

Evertjan. said:
function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables) tables.className = 't';
document.getElementById(id).className = '';
}
Click to expand...
Click to expand...


Setting a classname on a table is much slower than setting individual
attributes, since the browser needs to re-compute all the nested tags'
styles. It may or may not be the best route, depending on the situation.
Even nicer, IMHO:
function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables)
tables.className = (tables.id!=id)?'t':'';
}
Click to expand...


Unless you are confident that your markup will never change, setting the
value of className should be avoided, IMO. You should always add a classname
from the space-separated list or remove it. That way, if your table has a
class of "data" it would become "data t" rather than losing the "data" class
entirely. Then the code becomes more portable and generalized.
 
E

Evertjan.

Matt Kruse wrote on 27 okt 2005 in comp.lang.javascript:
Evertjan. said:
function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables) tables.className = 't';
document.getElementById(id).className = '';
}
Click to expand...
Click to expand...


Setting a classname on a table is much slower than setting individual
attributes, since the browser needs to re-compute all the nested tags'
styles. It may or may not be the best route, depending on the
situation.
Even nicer, IMHO:
function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables)
tables.className = (tables.id!=id)?'t':'';
}
Click to expand...


Unless you are confident that your markup will never change, setting
the value of className should be avoided, IMO. You should always add a
classname from the space-separated list or remove it. That way, if
your table has a class of "data" it would become "data t" rather than
losing the "data" class entirely. Then the code becomes more portable
and generalized.
Click to expand...


I am sure you are right, Mat.

I like programming for fun and visual elegance,
that is why I wrote "nicer", not "better".

In general, getElementsByTagName is also not safe in the sense that later
alterations won't lead to coding bugs, and the best is id-ing all
elements that need to be addressed by one's code.

However the class="data t" is rumored not to be cross browser compatible?
 
M

Matt Kruse

Evertjan. said:
However the class="data t" is rumored not to be cross browser
compatible?
Click to expand...

Not in any recent browsers that I know of. It's definitely part of CSS
specs.
Netscape 4 didn't like it, iirc, but who cares? :)
 
M

Michael Winter

Not in any recent browsers that I know of. It's definitely part of CSS
specs.
Click to expand...

And HTML, which is where it matters.

CSS itself has its own, related issue where multiple class names are
used in a selector. That is:

.class1.class2 {
/* ... */
}

Even IE6 gets this wrong; it considers the last class name only.
Netscape 4 didn't like it, iirc, but who cares? :)
Click to expand...

Neither does IE4, and I share your sentiment. After all, CSS only
provides presentation suggestions.

Mike
 
E

Evertjan.

Michael Winter wrote on 27 okt 2005 in comp.lang.javascript:
Even IE6 gets this wrong; it considers the last class name only.


Neither does IE4, and I share your sentiment. After all, CSS only
provides presentation suggestions.
Click to expand...

I will start using it again. ;-)
 

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

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with my responsive home page 2
Nested Loop Insert Page Break 1
Image shifts to the right when export the page to pdf 4
How to have two html audio players on one page? 0
Only one table shows up with the information 2
I need help fixing my website 2
Slideshow not working properly 2

Members online

No members online now.
Total: 78 (members: 0, guests: 78)
Robots: 475

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top