Show/hide table row - radio button

Hi,

I have the following scenerio: when my test first page loads:

I need the second section hidden. The second section should only be shown if they click the yes radio button, hidden if no. I’m having a difficult time managing the JS with this, even though it should be simple. If you view the source on the above file you can see my attempt at doing this isn’t quite working and I’m not sure why since my JS skills aren’t the best.

Ok, I came up with this which isn’t quite working right:

<html>
<head>
<script>
function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
 }else{
   document.getElementById("hidethis").style.display = 'none';
 }
}
</script>
</head>
<body>

<a href="javascript:;" onClick="toggle();">toggle</a>

<table border="1">
<tr>
<td>Always visible</td>
<td><input type="radio" name="citizen" value="yes" onClick="toggle">Yes <input type="radio"

name="citizen" value="no" onClick="toggle();">No
</tr>
<tr id="hidethis" style="display:none;">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>

</body>
</html>

Thanks,

Got it figured out (I always seem to do this):

<html>
<head>
<script>
function off() {
   document.getElementById("hidethis").style.display = 'none';
}
function on() {
   document.getElementById("hidethis").style.display = '';
}

</script>
</head>
<body>

<table border="1">
<tr>
<td>Always visible</td>
<td><input type="radio" name="citizen" value="yes" onClick="on();">Yes <input type="radio" name="citizen" value="no" onClick="off();">No
</tr>
<tr id="hidethis" style="display:none;">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>

</body>
</html>

Shoot, I forgot the approach above would work but I need this radio button to hide two rows, not just one.

Try the following. Your hideable rows will need to have IDs like this: hidethis1, hidethis2, etc.


function off() {
  var e, i = 1;
  do {
    e = document.getElementById("hidethis" + i++);
    if (e) e.style.display = 'none';
  } while (e);
}
function on() {
  var e, i = 1;
  do {
    e = document.getElementById("hidethis" + i++);
    if (e) {
      try { e.style.display = 'table-row'; } // DOM
      catch (err) { e.style.display = 'block'; } // IE
    }
  } while (e);
}

I don’t think that will work because I can only have one ID per row. Whereas I need two rows to share one ID, such as a DIV, but I haven’t got that to work.

ex.,

<div id="hidethis">
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>

This is truly an aggravating issue.

Why does my ID “hidethisaddress” have no properties when viewed in a browser? This is about the only solution I can come up with that might work for my need.

http://midwestwebdesign.net/New1.html

Ok, now I’m confused.

So, you can’t have this?


<tr id='hideme1'><td>bla bla</td></tr>
<tr id='hideme2'><td>bla bla</td></tr>

You could give multiple rows the same class-name.

Actually, there are several different ways to do this - but we have to know what your html structure is going to be.

So, you can’t have this?


<tr id='hideme1'><td>bla bla</td></tr>
<tr id='hideme2'><td>bla bla</td></tr>

Nope, sorry for the confusion. The structure looks like this:

http://midwestwebdesign.net/app_demo.html

Under the mailing address section (yes or no), I need to have the yes radio button show both rows (address, city), or if they click no, don’t show the two rows. Additionally, on page load, don’t show the two rows at all.

So, you can’t have this?


<tr id='hideme1'><td>bla bla</td></tr>
<tr id='hideme2'><td>bla bla</td></tr>

Nope, sorry for the confusion. The structure looks like this:

http://midwestwebdesign.net/app_demo.html

Under the mailing address section (yes or no), I need to have the yes radio button show both rows (address, city), or if they click no, don’t show the two rows. Additionally, on page load, don’t show the two rows at all.

So basically a class would be great in this instance, I just don’t know how you do that in JS.

Hi Ryan,

Try the following. It will show or hide all TRs with class ‘collapsible’.


function offaddress()
{
  xGetElementsByClassName('collapsible', document, 'tr',
    function(e) {
      e.style.display = 'none';
    }
  );
}
function onaddress()
{
  xGetElementsByClassName('collapsible', document, 'tr',
    function(e) {
      try { e.style.display = 'table-row'; } // DOM
      catch (err) { e.style.display = 'block'; } // IE
    }
  );
}
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xGetElementsByClassName(c,p,t,f)
{
  var found = new Array();
  var re = new RegExp('\\\\b'+c+'\\\\b', 'i');
//  var list = xGetElementsByTagName(t, p);
  var list = p.getElementsByTagName(t);
  for (var i = 0; i < list.length; ++i) {
    if (list[i].className && list[i].className.search(re) != -1) {
      found[found.length] = list[i];
      if (f) f(list[i]);
    }
  }
  return found;
}

Cool, works like a champ!

I definately don’t understand what this is doing:


// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xGetElementsByClassName(c,p,t,f)
{
  var found = new Array();
  var re = new RegExp('\\\\b'+c+'\\\\b', 'i');
//  var list = xGetElementsByTagName(t, p);
  var list = p.getElementsByTagName(t);
  for (var i = 0; i < list.length; ++i) {
    if (list[i].className && list[i].className.search(re) != -1) {
      found[found.length] = list[i];
      if (f) f(list[i]);
    }
  }
  return found;
}

But I guess I’ll consider it good since it’s now working! I guess I could have used an ID as long as they were two different ID names that compensated for both.

Thank you very much Mike, it is greatly appreciated!

You’re very welcome, Ryan. My pleasure. :slight_smile:

Check out the documentation for xGetElementsByClassName. If you have any questions feel free to ask.

The last parameter is an (optional) function reference. So instead of looping through the returned array we provide a function and it gets called for each item in the array.

You’ll notice that I have one line commented out. If you want IE4+ support or need to get around the IE5 ‘*’ bug you can use xGetElementsByTagName on that line.

All the best to ya!

Cool, I will check it out.