• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

javascript function to hide dynamic table elements

I'm trying to develop/find a JS function that will hide a list of dynamic links, essentially replacing them with checkboxes - all controlled with a 'master' checkbox.  The function to hide/display controls I find is much easier than content without controls.  My thought was to use a function like this:

function toggle(){
tdisplay=document.getElementsByName('table1')[0];
if(tdisplay.style.display==''){
   tdisplay.style.display='none';
}else{
   tdisplay.style.display='';
}}

Then give a table element the 'table1' id, but my output involves a link within sub tables including other controls/data that need to display.  I'm looking for a single function to turn off each link that is dynamically generated as the checkbox comes on.  Here's what exists so far.  Any advice is greatly appreciated.
0
Targhee
Asked:
Targhee
  • 4
  • 4
1 Solution
 
TargheeAuthor Commented:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkbox Test Page</title>
 
<style type="text/css">
.hiddenCheck { display:none }
.visibleCheck { display:block }
</style>
 
<script language="javascript">
 
function showHideChecks(theCheck) {
 var className = (theCheck.checked)?'visibleCheck':'hiddenCheck';
 var checks = document.getElementsByTagName('input');
 for (var i=0;i<checks.length;i++) {
   if (checks[i].className.indexOf('Check')!=-1) checks[i].className=className;
 }
}
</script>
 
</head>
<body>
 
<form name="displayForm" action="./index.cfm" method="post">
<table cellpadding="2" cellspacing="2" border="1" align="center" id="tst">
	<tr>
    	<td align="center"><input type="checkbox" name="cb" id="cb" onclick="showHideChecks(this)">&nbsp;&nbsp;</td>
    </tr>
	<tr>
    	<td>
        	<table>
            	<tr>
                	<td><a href="./index.cfm?event_reviewed=a"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a></td>
                </tr>
                <tr>
                	<td align="center"><input type="checkbox" class="hiddenCheck" value="a">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                </tr>
            </table>	
        </td>
    </tr>
    	<td>
        	<table>
            	<tr>
                	<td><a href="./index.cfm?event_reviewed=b"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a></td>
                </tr>
                <tr>
                	<td align="center"><input type="checkbox" class="hiddenCheck" value="b">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                </tr>
            </table>
       </td>
    </tr>
    </tr>
    	<td>
        	<table>
            	<tr>
                	<td><a href="./index.cfm?event_reviewed=c"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a></td>
                </tr>
                <tr>
                	<td align="center"><input type="checkbox" class="hiddenCheck" value="c">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                </tr>
            </table>
       </td>
    </tr>    
</table> 
</form>
</body>
</html>

Open in new window

0
 
JohnSixkillerCommented:
Hi, what exactly you want to do?
 When master check is checked you want to add checkboxes and hide links?
0
 
TargheeAuthor Commented:
Yes.  That is exactly what I need to have happen.  On page load, the links display, the checkboxes are hidden.  Checking the master box hides the links, displays the checkboxes.

Thanks.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
JohnSixkillerCommented:
You can use following example. Or you can access particulat link/check in similar way. Another option is to add ID to each link/checkbox pair:

<a href="./index.cfm?event_reviewed=c" id='link1'><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""><input id='cb1' type="checkbox" value="c" style="display:none">

function showHideChecks(theCheck) {       
         var checkCount = 1;
       for(var i=1; i<checkCount; i++){
          document.getElementById("link"+i).style.display = theCheck.checked ? "none" : "block";
          document.getElementById("cb"+i).style.display  = theCheck.checked ? "block" : "none";
       }
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkbox Test Page</title>
 
 
<script language="javascript">
 
function showHideChecks(theCheck) {
	 var tables = document.getElementById("tst").getElementsByTagName("table");
	 for(var i=0; i<tables.length; i++){
	    tables[i].rows[0].style.display = theCheck.checked ? "none" : "block";
		tables[i].rows[1].style.display = theCheck.checked ? "block" : "none";
	 }
}
</script>
 
</head>
<body>
 
<form name="displayForm" action="./index.cfm" method="post">
<table cellpadding="2" cellspacing="2" border="1" align="center" id="tst">
        <tr>
        <td align="center"><input type="checkbox" name="cb" id="cb" onclick="showHideChecks(this)">  </td>
    </tr>
        <tr>
        <td>
                <table>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=a"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a></td>
                </tr>
                <tr style="display:none">
                        <td align="center"><input type="checkbox" value="a">    </td>
                </tr>
            </table>    
        </td>
    </tr>
        <td>
                <table>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=b"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a></td>
                </tr>
                <tr style="display:none">
                        <td align="center"><input type="checkbox" value="b">    </td>
                </tr>
            </table>
       </td>
    </tr>
    </tr>
        <td>
                <table>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=c"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a></td>
                </tr>
                <tr style="display:none">
                        <td align="center"><input type="checkbox" value="c">    </td>
                </tr>
            </table>
       </td>
    </tr>    
</table> 
</form>
</body>
</html>

Open in new window

0
 
TargheeAuthor Commented:
I like your code snipit, but unfortunately that is not a solution, as all other table data must remain visible.  This function is 'all or none', in terms of everything displayed within table 'tst' is either visible or not.  

I like the idea of adding IDs to link/checkbox pairs with the increment added to the name.  This should work for a dynamic solution and allow additional row data to display as well.  I didn't get your function to toggle between the link and the checkbox - and frankly it doesn't need to be able to toggle back and forth - all it needs to do is, on check, hide the links and display the checkboxes.

I've gotten as far as to get the checkboxes to come on with the check, but I can't get the links to hide:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkbox Test Page</title>
 
<script language="javascript">
 
function toggleControls(theCheck) {       
         var checkCount = 4;
       for(var i=1; i<checkCount; i++){
	   		if(document.getElementById("link"+i).style.display != 'block')
			 {
			   document.getElementById("link"+i).style.display = 'block';
			   document.getElementById("cb"+i).style.display = '';
			 }
			 else
			 {
			   document.getElementById("link"+i).style.display = '';
			   document.getElementById("cb"+i).style.display = 'block';
			 }          
       }
	}
</script>
 
</head>
<body>
 
<form name="displayForm" action="./index.cfm" method="post">
<table cellpadding="2" cellspacing="2" border="1" align="center" id="tst">
        <tr>
        <td align="center"><input type="checkbox" name="xx" id="xx" onclick="toggleControls(this)">  </td>
    </tr>
        <tr>
        <td>
                <table>
                <tr><td>test row 1</td></tr>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=a" id="link1"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""><input id="cb1" type="checkbox" value="a" style="display:none"></td>
                </tr>
            </table>    
        </td>
    </tr>
        <td>
                <table>
                <tr><td>test row 2</td></tr>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=b" id="link2"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""><input id="cb2" type="checkbox" value="b" style="display:none"></td>
                </tr>
            </table>
       </td>
    </tr>
    </tr>
        <td>
                <table>
                <tr><td>test row 3</td></tr>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=c" id="link3"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""><input id="cb3" type="checkbox" value="c" style="display:none"></td>
                </tr>
            </table>
       </td>
    </tr>    
</table> 
</form>
</body>
</html>

Open in new window

0
 
JohnSixkillerCommented:
Yes, it was only idea how to access DOM elements. For example when on TR:

tr.cells[0].firstChild or tr.cells[0].getElementsByTagName("input")[0] allows you to access links/checks separately from other content. However using ID is propably better solution.

If you want hide an element, you have to set its style.display property to NONE. You have also markup mistake in your code. There is missing closing link tag  (</a>). So everything agter <a ...> was treated as part of the link and hidden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkbox Test Page</title>
 
<script language="javascript">
 
function toggleControls(theCheck) {       
         var checkCount = 4;
       for(var i=1; i<checkCount; i++){
                        if(theCheck.checked) // or w/o IF or any other condition
                         {						 
                           document.getElementById("link"+i).style.display = 'none';						  
                           document.getElementById("cb"+i).style.display = 'block';						   
                         }
                         else
                         {
                           document.getElementById("link"+i).style.display = 'block';
                           document.getElementById("cb"+i).style.display = 'none';
                         }          
       }
        }
</script>
 
</head>
<body>
 
<form name="displayForm" action="./index.cfm" method="post">
<table cellpadding="2" cellspacing="2" border="1" align="center" id="tst">
        <tr>
        <td align="center"><input type="checkbox" name="xx" id="xx" onclick="toggleControls(this)">  </td>
    </tr>
        <tr>
        <td>
                <table>
                <tr><td>test row 1</td></tr>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=a" id="link1"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a><input id="cb1" type="checkbox" value="a" style="display:none"></td>
                </tr>
            </table>    
        </td>
    </tr>
        <td>
                <table>
                <tr><td>test row 2</td></tr>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=b" id="link2"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a><input id="cb2" type="checkbox" value="b" style="display:none"></td>
                </tr>
            </table>
       </td>
    </tr>
    </tr>
        <td>
                <table>
                <tr><td>test row 3</td></tr>
                <tr>
                        <td><a href="./index.cfm?event_reviewed=c" id="link3"><img src="../images/dismiss.gif" border="1" align="right" align="top" alt=""></a><input id="cb3" type="checkbox" value="c" style="display:none"></td>
                </tr>
            </table>
       </td>
    </tr>    
</table> 
</form>
</body>
</html>

Open in new window

0
 
TargheeAuthor Commented:
Well done JohnSixKiller.  I appreciate your explanation - very helpful.
0
 
JohnSixkillerCommented:
You are welcome.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now