making a table row visible or invisible

**Technosailor** · Jul 12, 2003, 21:16

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>

I know that can be optimized so please give me pointers on that.

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>

Now for the gitty...

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

**xDev** · Jul 13, 2003, 08:06

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>

-xDev

**Technosailor** · Jul 13, 2003, 20:36

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

**Technosailor** · Jul 16, 2003, 15:05

erg...no one?

**vgarcia** · Jul 16, 2003, 16:19

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>

**Technosailor** · Jul 26, 2003, 14:49

Finally got back to this. All I have to say is.... Vinnie for president!

**beetle** · Jul 27, 2003, 18:06

Originally Posted by vgarcia

//get all td tags for this TR
var mdCN1 = document.getElementById("md1" ).childNodes;

What's wrong with

HTML Code:

var mdCN1 = document.getElementById( "md1" ).cells;

??? That way you don't have to re-organize your HTML for Mozilla to skip the textNodes (or use normalize() beforehand)

HTML Code:

var TR1 = document.getElementById( "md1" );
TR1.normalize();
var mdCN1 = TR1.childNodes;

But, I think using the cells collection is better [img]images/smilies/biggrin.gif[/img]

**vgarcia** · Aug 1, 2003, 16:14

Originally Posted by beetle

[/font]
What's wrong with

HTML Code:

var mdCN1 = document.getElementById( "md1" ).cells;

??? That way you don't have to re-organize your HTML for Mozilla to skip the textNodes (or use normalize() beforehand)

HTML Code:

var TR1 = document.getElementById( "md1" );
TR1.normalize();
var mdCN1 = TR1.childNodes;

But, I think using the cells collection is better [img]images/smilies/biggrin.gif[/img]

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.

**beetle** · Aug 1, 2003, 16:45

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)