473,326 Members | 2,815 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Problems toggling style.display values

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>

Oct 27 '05 #1
13 5503
Gunnar wrote:
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++){
for(var iCount=0; iCount < allTables.length; iCount++){
document.getElementById(id).style.display = "none"; // turn all
tables off
}
allTables[iCount].style.display = "none"; // turn all tables off
}


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

Mick

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>

Oct 27 '05 #2
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>

Oct 27 '05 #3

Gunnar wrote:

[snip]
allTables[iCount].style.display == 'none';
"==" is a comparison operator. It should be "=" (the assignment
operator).

[snip] document.getElementById(id).style.display == "";


Ditto

Julian

Oct 27 '05 #4
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';
allTables[iCount].style.display = 'none';
}

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

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

[..]
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 27 '05 #5
Evertjan. wrote on 27 okt 2005 in comp.lang.javascript:
Gunnar wrote on 27 okt 2005 in comp.lang.javascript:
<script type="text/javascript">

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


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

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 27 '05 #6
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[i].className = 't';
document.getElementById(id).className = '';
}
</script>


Even nicer, IMHO:

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

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 27 '05 #7
On 27/10/2005 17:23, Evertjan. wrote:

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


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

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Oct 27 '05 #8
Thank you so much for your guidance!

Oct 27 '05 #9
Evertjan. wrote:
function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables) tables[i].className = 't';
document.getElementById(id).className = '';
}

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[i].className = (tables[i].id!=id)?'t':'';
}


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.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Oct 27 '05 #10
Matt Kruse wrote on 27 okt 2005 in comp.lang.javascript:
Evertjan. wrote:
function toggleTable(id){
var tables = document.getElementsByTagName('table');
for(i in tables) tables[i].className = 't';
document.getElementById(id).className = '';
}


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[i].className = (tables[i].id!=id)?'t':'';
}


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.


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?

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 27 '05 #11
Evertjan. wrote:
However the class="data t" is rumored not to be cross browser
compatible?


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? :)

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Oct 27 '05 #12
On 27/10/2005 20:33, Matt Kruse wrote:
Evertjan. wrote:
However the class="data t" is rumored not to be cross browser
compatible?
Not in any recent browsers that I know of. It's definitely part of CSS
specs.


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? :)


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

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Oct 27 '05 #13
Michael Winter wrote on 27 okt 2005 in comp.lang.javascript:
Even IE6 gets this wrong; it considers the last class name only.
Netscape 4 didn't like it, iirc, but who cares? :)


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


I will start using it again. ;-)

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 27 '05 #14

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Christopher Brandsdal | last post by:
Hi! I have a anoying problem with my editor! What i want to do is make a popup that holds a string for the "hyperlink" window... I have a popup to do this before, and it works perfecty, but in...
13
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
0
by: Anne van Kesteren | last post by:
Ok, here it goes. Originally I submitted this proposal to www-style. Since I don't get feedback there, I think I missed a few (maybe a lot) of points. Proposal:...
3
by: daveland | last post by:
I am working on some JavaScript that dynamically adds rows to a table in response to a button click. A new row does appear on the screen when the button is clicked. However, that table to which a...
1
by: Tristan Miller | last post by:
Greetings. I am trying to write a function which toggles the display of a certain class of <div> elements in an HTML page. The CSS file initially sets some classes to "display: none", and...
6
by: Dr John Stockton | last post by:
I see, quite often, code like if (tmp.style.display == 'none') tmp.style.display = 'block'; else if (tmp.style.display == 'block') tmp.style.display = 'none'; or if (tmp.style.display ==...
1
by: Bob | last post by:
Hi, Hope you can help me with this one. I'm at my wits end. I'm trying to create an intelligent edit-box like the excellent "Customer" one at the URL: ...
6
mikeinspain
by: mikeinspain | last post by:
Hi Guys.. Hope someone can help. I have a problem with a particular page on one of the sites I am developing. The page is here: http://tagwealth.co.uk/contact/. The pages renders fine in...
4
by: plumba | last post by:
Let me explain.... I have a form (most of which you guys have helped me with!!). The initial problem I was having is that it was holding the data in the fields after submit, I resolved this by...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.