Show/Hide Table Row

@ryanbutlerNov 02.2006

Hi,

I’m wondering if someone with a little more JS knowledge than I have can help me out. I have a simple page here:

~~[url]~~http://midwestwebdesign.net/test.html[/url]

On page load, I need to hide the second row, which is working fine via CSS. However, is a visitor clicks on the yes button, I need to show the hidden table row. If they click no, hide it again, simple toggle. The not so simple part for me is how the JS can be written. I saw something close on this thread:

~~[url]~~http://www.webdeveloper.com/forum/showthread.php?t=125739[/url]

But couldn’t quit figure out how to customize it for my needs. There will be a few additional rows needing this as well.

If anyone can point me in a direction that shows how to do this, I would glady go there. Any assistance that could be provided, would be greatly appreciated.

Thanks,

to post a comment

JavaScript

10 Comments(s) _↴

@ryanbutlerauthorNov 02.2006 — #I have accomplished this much so far:

[CODE]<script type="text/javascript"> 
 function showhide(){ 
 if(document.application.permresident.style.display == 'none'){ 
 document.application.permresident.style.display =''; 
 }else{ 
 document.application.permresident.style.display ='none'; 
 } 
 return false; 
 } 
 </script>[/CODE]

HTML:

[CODE]<form name="application">
 <table>
 <tr>
 <td class="reqd">Are you a U.S. Citizen? </td>
 <td><input name="citizen" type="radio" value="yes" onfocus="showhide(); return false" />
 Yes &nbsp;&nbsp;&nbsp;
 <input name="citizen" type="radio" value="no" onfocus="showhide(); return false" />
 No</td>
 </tr>
 <tr id="permresident" class="oddrow">
 <td class="indent">If no, are you a permanent resident? <br />
 <span class="fine">(If yes, please attach a copy of your alien registration receipt card.)</span></td>
 <td><input name="permresident" type="radio" value="yes" />
 Yes &nbsp;&nbsp;&nbsp;
 <input name="permresident" type="radio" value="no" />
 No</td>
 </tr>
 </table>
 </form>[/CODE]

But it's certainly not working at the moment. Any clues?

@shkillerNov 02.2006 — #do this:

change permresident to span and then close it. you shouldn't use tables.

<span id="permresident">this should be closed</span>

and then to close it do this:

<input name="perm" type="radio" value="yes" onclick="permresident.style.display='none';"/>

@ryanbutlerauthorNov 02.2006 — #That was fun (in case anyone stumbles and wonders my solution):

[CODE]<html>
 <head>
 <script>
 function off() {
 document.getElementById("hidethis").style.display = 'none';
 }
 function on() {
 document.getElementById("hidethis").style.display = '';
 }
 
 </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="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>[/CODE]

@ryanbutlerauthorNov 02.2006 — #do this:

change permresident to span and then close it. you shouldn't use tables.

<span id="permresident">this should be closed</span>

and then to close it do this:

<input name="perm" type="radio" value="yes" onclick="permresident.style.display='none';"/>[/QUOTE]

Thanks for that solution, I have to use tables in this instance, not really an option.

@ryanbutlerauthorNov 02.2006 — #Shoot, this won't work because I need this one radio button to work for two rows, maybe an ID will work.

@JMRKERNov 02.2006 — #I approached it a little differently, but you may be able to modify the buttons to use radio buttons instead.

Hope it helps.

[code=php]
 <html>
 <head>
 <title>Hidden Tables</title>
 <script type="text/javascript">
 function Toggle(objID) {
 var obj = document.getElementById(objID);
 if (obj.style.display == 'block') { obj.style.display = 'none'; }
 else { obj.style.display = 'block'; }
 }
 </script>
 </head>
 <body>
 
 <div style="float:left">
 <table id="table1" border='1'>
 <tr><th><H1>Table 1</th></tr>
 </table>
 </div>
 
 <div style="float:left">
 
 <table id="table2" border='1' style="display:none">
 <tr><th><H1>Table 2</th></tr>
 </table>
 </div>
 
 <div style="clear:both">
 <button
 onclick="document.getElementById('table1').style.display='block';document.getElementById('table2').style.display='none';">
 Show Table 1</button>
 <button
 onclick="document.getElementById('table1').style.display='none';document.getElementById('table2').style.display='block';">
 Show Table 2</button>
 
 <button onclick="Toggle('table3')">Show Table 3</button>
 
 </div>
 
 <div style="float:left">
 <table id="table3" border='1' style="display:none;">
 <tr><th><H1>Table 3</th></tr>
 </table>
 </div>
 
 <div style="clear:both">
 </div>
 
 </body>
 </html>
 [/code]

@ryanbutlerauthorNov 02.2006 — #Would there be a way to hide two rows with a yes click of a radio button then, such as using a class? If I could figure this out, I'd be good.

@JMRKERNov 03.2006 — #Getting back to your original question, how does this work for you?

[code=php]
 <html>
 <head>
 <title>Table Rows</title>
 
 <script type="text/javascript"> 
 function Show(elem) {
 document.getElementById(elem).style.display = '';
 }
 function Hide(elem) {
 document.getElementById(elem).style.display = 'none';
 }
 function showhide(elem0,elem1) {
 Show(elem0);
 Hide(elem1);
 }
 </script>
 
 </head>
 <body>
 <form name="application" onSubmit="return false">
 <table border=1>
 
 <tr>
 <td class="reqd">Are you a U.S. Citizen? </td>
 <td><input name="citizen" type="radio" value="no" onclick="Hide('permresident')" />Yes
 <input name="citizen" type="radio" value="yes" onclick="Show('permresident')" />No 
 
 <div id="permresident" class="oddrow" style="display:none">
 Are you a permanent resident?
 <input name="permresident" type="radio" value="yes" onClick="showhide('pryes','prno')" />Yes 
 <input name="permresident" type="radio" value="no" onClick="showhide('prno','pryes')" />No
 <div id="pryes" class="fine" style="display:none">
 (Yes, please attach a copy of your alien registration receipt card.)
 </div>
 <div id="prno"  class="fine" style="display:none">
 (No, please attach a copy of your temporary registration card.)
 </div>
 
 </td>
 </div>
 
 </td>
 
 </tr>
 </table>
 </form>
 </body>
 </html>
 [/code]

@ryanbutlerauthorNov 03.2006 — #I'm sure it would work fine except I really need the class to be on two table rows (not DIV's) with classes, not ID's.

@3xxxApr 22.2015 — #That was fun (in case anyone stumbles and wonders my solution):

[CODE]<html>
 <head>
 <script>
 function off() {
 document.getElementById("hidethis").style.display = 'none';
 }
 function on() {
 document.getElementById("hidethis").style.display = '';
 }
 
 </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="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>[/CODE]

[/QUOTE]

BEST-ever solution for table row -- on the web

another one -- need class to set to table row + import javascript

here it is

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style>

.commentdialogue {display:block;}

</style>

<script type="text/javascript">

function showhide(tblname) {

var display = $("#"+tblname+" .commentdialogue").css("display");

if (display === "block") {display = "none"}

else display = "block";

$("#"+tblname+" .commentdialogue").css("display", display);

}

</script>

</head>

<body>

<input type="button" onclick="showhide('Table1');" value="TOPWithdraw"></input>

<table id="Table1">

<tr><td>row1</td></tr>

<tr class="commentdialogue"><td>shown at first</td></tr>

<tr style="display:block;"><td>shown style at first</td></tr>

<tr><td>row4</td></tr>

</table>

<input type="button" onclick="showhide('Table2');" value="Show"></input>
  <table id="Table2">
   <tr><td>row1</td></tr>
   <tr class="commentdialogue"><td>hidden at first</td></tr>
   <tr class="commentdialogue"><td>hidden at first</td></tr>
   <tr><td>row4</td></tr>
  </table>

Also in #JavaScript _↴

Library doesn't seem to be initilized for me to declare global variables Random Image selection Help me remove ScrolltoTop on page refresh/load?

Success!

Help @ryanbutler spread the word by sharing this article on Twitter...

Tweet This

Show/Hide Table Row

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Show/Hide Table Row

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴