Show/hide table row - radio button

**rbutler** · Nov 2, 2006 10:00

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:

Code:

<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,

**rbutler** · Nov 2, 2006 10:37

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

Code:

<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>

**rbutler** · Nov 2, 2006 10:55

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

**MikeFoster** · Nov 2, 2006 11:54

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

Code:

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);
}

**rbutler** · Nov 2, 2006 12:56

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.,

Code:

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

This is truly an aggravating issue.

**rbutler** · Nov 2, 2006 13:59

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

**MikeFoster** · Nov 2, 2006 14:21

Ok, now I'm confused.

So, you can't have this?
[code]
<tr id='hideme1'><td>bla bla</td></tr>
<tr id='hideme2'><td>bla bla</td></tr>
[code]

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.

**rbutler** · Nov 2, 2006 15:29

So, you can't have this?
[code]
<tr id='hideme1'><td>bla bla</td></tr>
<tr id='hideme2'><td>bla bla</td></tr>
[code]

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.

**rbutler** · Nov 2, 2006 15:29

So, you can't have this?
[code]
<tr id='hideme1'><td>bla bla</td></tr>
<tr id='hideme2'><td>bla bla</td></tr>
[code]

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.

**MikeFoster** · Nov 2, 2006 20:12

Hi Ryan,

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

Code:

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;
}

**rbutler** · Nov 3, 2006 08:26

Cool, works like a champ!

I definately don't understand what this is doing:

Code:

// 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!

**MikeFoster** · Nov 3, 2006 10:18

You're very welcome, Ryan. My pleasure.

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!

**rbutler** · Nov 3, 2006 10:28

Cool, I will check it out.

User Tag List

Thread: Show/hide table row - radio button

Thread Tools

Display

Show/hide table row - radio button

Bookmarks

Bookmarks

Posting Permissions