SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
-
Jul 12, 2003, 21:16 #1
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
making a table row visible or invisible
I have a radio button set that I am trying to use the onclick method to mae one row visible or the other. Let me show you what I mean. I have this javascript defined. I tried to use pointers but then I got element has no properties. So I've reverted to useing the full DOM call.
Code:<script type="text/javascript"> <!-- var sd = document.getElementById("sd"); var m1 = document.getElementById("md1"); var m2 = document.getElementById("md2"); function singleChange() { document.getElementById("sd").style.visibility = 'visible'; document.getElementById("md1").style.visibility = 'hidden'; document.getElementById("md2").style.visibility = 'hidden'; document.getElementById("md1").style.display = 'none'; document.getElementById("md2").style.display = 'none'; document.getElementById("sd").style.display = 'inline'; } function multiChange() { document.getElementById("sd").style.visibility = 'hidden'; document.getElementById("md1").style.visibility = 'visible'; document.getElementById("md2").style.visibility = 'visible'; document.getElementById("md1").style.display = 'inline'; document.getElementById("md2").style.display = 'inline'; document.getElementById("sd").style.display = 'none'; } //--> </script>
Now my HTML looks like this:
Code:<style type="text/css"> . . . #md1,#md2 { display:none; } #sd { visibility:visible; } </style> . . . <tr> <td class="left">Event:</td> <td class="right"> <label for="singledate">Single Date</label> <input type="radio" name="datetype" id="singledate" value="0" checked onClick="singleChange();"> <label for="multidate">Date Range</label> <input type="radio" name="datetype" id="multidate" value="1" onclick="multiChange();"> </td> </tr> <tr id="sd"> . . </tr> <tr id="md1"> . . </tr> <tr id="md2"> . . </tr>
When I load the page the sd row is displayed which is fine. It is the default and it is supposed to be displayed when the first radio button is checked. This is okay screenshot
But... when I select the second radio item, sd is supposed to be replaced by the 2 rows md1 and md2. It is, but the alignment goes funky. CSS display property? If I don't use display then I get the big gap. If I use it, the alignment goes odd. How can I get the alignment right? screenshot
Finally, when I click back on Single Date, the same alignment goes haywire PLUS leaves a gap underneath.screenshot
Any tips?
Aaron
-
Jul 13, 2003, 08:06 #2
- Join Date
- Jul 2003
- Location
- Moncton, New Brunswick, Canada
- Posts
- 247
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Aaron,
I think your alignment problem was due to the fact that you have
2 td's when you start the table but when you switch them you only have one, or none if your code is an example.
Try this out:
Code:<html> <head> <style type="text/css"> #md1,#md2 { display:none; } table { border-collapse: collapse; border-bottom: 1px solid black; } table td { border: 1px solid black; padding: 4px; } </style> <script type="text/javascript"> function els() { var el = [ document.getElementById("sd").style, document.getElementById("md1").style, document.getElementById("md2").style ]; return el; } function singleChange() { var el = els(); el[1].display = 'none'; el[2].display = 'none'; el[0].display = 'block'; } function multiChange() { var el = els(); el[1].display = 'block'; el[2].display = 'block'; el[0].display = 'none'; } </script> </head> <body> <table> <tr> <td class="left">Event:</td> <td class="right"> <label for="singledate">Single Date</label> <input type="radio" name="datetype" id="singledate" value="0" checked="checked" onclick="singleChange();" /> <label for="multidate">Date Range</label> <input type="radio" name="datetype" id="multidate" value="1" onclick="multiChange();" /> </td> </tr> <tr id="sd"> <td> sd </td> <td> sd </td> </tr> <tr id="md1"> <td> md1 </td> <td> md1 </td> </tr> <tr id="md2"> <td> md2 </td> <td> md2 </td> </tr> </table> </body> </html>
Last edited by xDev; Jul 13, 2003 at 08:18.
-
Jul 13, 2003, 20:36 #3
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm sorry, I was typing up the code in shortened form. Actually I had 2 td's on each line. So no solution...though I like your code better and I'll use it.
Aaron
-
Jul 16, 2003, 15:05 #4
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
erg...no one?
-
Jul 16, 2003, 16:19 #5
Sketch,
It's a bit more complicated than you have. You'll have to set the display on each table cell as opposed to each table row, which isn't an issue in and of itself, but you run into some browser support issues. IE doesn't understand display: table-cell in CSS, so you have to set its display to block. However, Mozilla and Opera render block-displayed table cells very strangely, so we have to resort to JS hell: browser detection. However, I optimized your function well enough that it shouldn't matter, at least until IE7 is released.
HTML Code:<html> <head> <style type="text/css"> /* commented these style rules out because they were messing the script up :) #md1,#md2 { display:none; } */ table { border-collapse: collapse; border-bottom: 1px solid black; } table td { border: 1px solid black; padding: 4px; } </style> <script type="text/javascript"> function getStyle(myVal) { if (myVal == 1) { //browsercheck by object model support :( if (document.all && document.getElementById) { return "block"; } else if (document.getElementById && !document.all) { return "table-cell"; } else { return "Not Supported"; } } if (myVal == 0) return "none"; } function change(md1Display, md2Display, sdDisplay) { //style variables, pass these into the getStyle() function to return the appropriate //style for the browser we're targeting. var styleMD1 = getStyle(md1Display); var styleMD2 = getStyle(md2Display); var styleSD = getStyle(sdDisplay); //get all td tags for this TR var mdCN1 = document.getElementById("md1").childNodes; var mdCN2 = document.getElementById("md2").childNodes; var sdCN = document.getElementById("sd").childNodes; for (var x = 0; x < mdCN1.length; x++) { mdCN1[x].style.display = styleMD1; } for (var x = 0; x < mdCN2.length; x++) { mdCN2[x].style.display = styleMD2; } for (var x = 0; x < sdCN.length; x++) { sdCN[x].style.display = styleSD; } } window.onload = function () {change(0, 0, 1)}; </script> </head> <body> <table> <tr> <td class="left">Event:</td> <td class="right"> <label for="singledate">Single Date</label> <input type="radio" name="datetype" id="singledate" value="0" checked="checked" onclick="change(0, 0, 1);" /> <label for="multidate">Date Range</label> <input type="radio" name="datetype" id="multidate" value="1" onclick="change(1, 1, 0);" /> </td> </tr> <!--the TDs in these rows have to stay on one line, otherwise Mozilla will count the newlines in the loop :(--> <tr id="sd"><td> sd </td><td> sd </td></tr> <tr id="md1"><td> md1 </td><td> md1 </td></tr> <tr id="md2"><td> md2 </td><td> md2 </td></tr> </table> </body> </html>
-
Jul 26, 2003, 14:49 #6
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Finally got back to this. All I have to say is.... Vinnie for president!
-
Jul 27, 2003, 18:06 #7
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by vgarcia
What's wrong withHTML Code:var mdCN1 = document.getElementById( "md1" ).cells;
HTML Code:var TR1 = document.getElementById( "md1" ); TR1.normalize(); var mdCN1 = TR1.childNodes;
-
Aug 1, 2003, 16:14 #8
Originally Posted by beetle
You must spread some Reputation around before giving it to beetle again.
This is definitely a better method than what I posted earlier. Beetle for King!I didn't even know about the cells collection! Good tips.
-
Aug 1, 2003, 16:45 #9
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hehe, sure thing. While I'm at it, I'll add
TABLE.rows [collection]
TABLE.tBodies [collection]
TR.rowIndex [integer]
TD.cellIndex [integer]
In case you were unaware of those, as well (as they are somewhat related)
-
Aug 23, 2003, 06:56 #10
- Join Date
- Mar 2002
- Location
- Lappeenranta, Finland
- Posts
- 176
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Why is this thread always on the top?
-
Aug 23, 2003, 07:24 #11
- Join Date
- Jul 2003
- Location
- Sacramento, CA
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Because it was pinned or something buy the thread starter sketch!
-
Aug 23, 2003, 08:52 #12
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hmmm. Sorry guys. I thought it got unpinned. It is unpinned now.
Bookmarks