Page 1 of 1

Problem in MOZILLA in SHOW/HIDE table ROWS

Posted: Wed Dec 20, 2006 7:46 am
by eshban
Hi, I have just write a code which show/hide rows. But it cannot runs well in MOZILLA browser.

Just run it in MOZILLA and click on the two radio button again and again, you can see that it loose its formatting. second row of table will be pushed towards right.

Please help in this regard.

here is my code

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

Code: Select all

<script>
function hidetable_second()
{
//		    document.getElementById('web_pg_name_caption').style.display = 'inline';		    				
		    document.getElementById('newrow_2').style.display = 'none';	 	    	
			document.getElementById('newrow_3').style.display = 'none';	
			document.getElementById('myfile2').style.display = 'none';	 	    	
			document.getElementById('firstrow').style.display = 'block';		
			
 }  
  
  
   function hiderow(){
      
    document.getElementById('newrow_2').style.display = 'none';	 	    	
    document.getElementById('myfile2').style.display = 'none';	
	
	document.getElementById('firstrow').style.display = 'none';		
	
  }  
  
    
  
  function hiderow_oneway()
  {
    document.getElementById('newrow_2').style.display = 'block';	 	    	
    document.getElementById('newrow_3').style.display = 'block';	 	    	
    document.getElementById('myfile2').style.display = 'block';	 	    	
  }
</script>

Code: Select all

<body onload="hiderow()">

<table width="799px"border="2" cellspacing="0" cellpadding="0" align="center">
	<tr>
		<td colspan="2" align="center" width="799px" valign="top">
		 <input name="radiobutton" type="radio" value="roundtrip"  onClick="hidetable_second()"> Create New Page	
		 <input name="radiobutton" type="radio" value="oneway" onClick="hiderow_oneway()">Update Existing Page			
	  </td>
   </tr>
   
   <TR id="firstrow">
	  <TD width="399px" valign="top">WebPage Name:	  
	  <input name="webpageName" type="text" value="mypage" id="web_pg_name_caption"></TD>
	  <TD id="new_t" width="400px" valign="top">WebPage Title:
	  <input name="webpageTitle" type="text" value="mypage_title" id="web_pg_name_title"></TD>
	  </TR>
	  
	  
	  <tr>
	      <td id="newrow_2" width="399px" valign="top">WebPage Path:&nbsp;&nbsp;</td>
	  	  <td id="newrow_3"  width="400px" valign="top"><input type="file" name="myfile2" id="myfile2"></td>
    </tr>
</table>	
   
</body>
</html>

Posted: Wed Dec 20, 2006 9:41 am
by kendall
there is a style called display:table-row

you will need to do a browser test cause IE doesnt accept it