JavaScript and client side scripting.
Moderator: General Moderators
Gen-ik
DevNet Resident
Posts: 1059 Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.
Post
by Gen-ik » Sun Jan 02, 2005 4:13 am
Hi guys.
I have a <table> that has some of it's <tr> element displays set to "display:none". The reason I'm doing this is so I can show/hide the <tr> elements depending on the state of a checkbox.
I'm applying the style to the <tr> elements using CSS and changing the "display" value using JavaScript. This is working fine with Netscape and Firefox but IE doesn't seem to be able to access the "display" value once the "display" has been set to "none".
Here's a quick example:
Code: Select all
<html>
<head>
<script type="text/javascript">
function flip()
{
document.getElementById("foobar").style.display = "table-row";
}
</script>
<style type="text/css">
tr.optional {
display:none;
}
</style>
</head>
<body>
<table>
<tr><td>Hello</td></tr>
<tr class="optional" id="foobar"><td>World</td></tr>
</table>
<a href="javascript:flip()">Show TR</a>
</body>
</html>
Does anyone know of a way to get this working?
Cheers.
Si ++
Gen-ik
DevNet Resident
Posts: 1059 Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.
Post
by Gen-ik » Sun Jan 02, 2005 4:47 am
I've just solved the problem.
Instead of directly changing the display value using obj.style.display = "table-row" I now change the "className" of the <tr> obj.className = "optionalOn" and that's working fine in NS, FF, and IE.
Shendemiar
Forum Contributor
Posts: 404 Joined: Thu Jan 08, 2004 8:28 am
Post
by Shendemiar » Sun Jan 02, 2005 6:14 am
I'd like to see it if you have it online somewhere. TYu can also PM if you don't want too much publicity.
Gen-ik
DevNet Resident
Posts: 1059 Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.
Post
by Gen-ik » Sun Jan 02, 2005 7:04 am
Shendemiar wrote: I'd like to see it if you have it online somewhere. TYu can also PM if you don't want too much publicity.
It's not actually on-line yet. I've got Apache 'n' PHP etc running on my PC so I'm running it from there.
Is there anything in particular you wanted to see? The code is pretty simple so I can put together a little example for you if you want.
Si ++
Shendemiar
Forum Contributor
Posts: 404 Joined: Thu Jan 08, 2004 8:28 am
Post
by Shendemiar » Sun Jan 02, 2005 7:37 am
Just the outlook of the page and solutions you've used. The usage of "display" mainly.
Gen-ik
DevNet Resident
Posts: 1059 Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.
Post
by Gen-ik » Sun Jan 02, 2005 8:09 am
No problem mate. Here's an example of how I'm handling the "flipable" form options:
It's not the best looking form in the world but it should give you a good idea of how it works... and how you could expand on the idea.
Code: Select all
<html><head>
<style type="text/css">
form { margin:0px; padding:0px; }
form table { background-color:#d0d0d0; }
form td { background-color:#ffffff; padding:5px; width:200px; }
form tr.optional { display:none; }
form tr.optionalOn { display:table-row; }
</style>
<script type="text/javascript">
function flip(obj, total)
{
for(var i=1; i<=total; i++)
{
var newClass = !obj.checked ? "optional" : "optionalOn";
document.getElementById(obj.name + "_" + i).className = newClass;
}
}
</script>
</head><body>
<form>
<table cellpadding="0" cellspacing="1">
<tr>
<td>A Checkbox</td>
<td><input type="checkbox" name="foobar" value="1" onclick="flip(this,2)" /> Click me</td>
</tr>
<tr id="foobar_1" class="optional">
<td>An optional input</td>
<td><input type="text" name="anInput" value="" /></td>
</tr>
<tr id="foobar_2" class="optional">
<td>Another optional input</td>
<td><input type="text" name="anotherInput" value="" /></td>
</tr>
<tr>
<td>Some more stuff</td>
<td><input type="text" name="someMoreStuff" value="" /></td>
</tr>
</table>
</form>
</body></html>
Have fun
Si ++
Shendemiar
Forum Contributor
Posts: 404 Joined: Thu Jan 08, 2004 8:28 am
Post
by Shendemiar » Sun Jan 02, 2005 8:27 am
Handy nice and compact!