SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Udine - Italy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Display: none/inline does not work on tables?

    Hallo,

    I am trying the following css + javascript code on Firefox and Safari on a Mac.
    What I got is that my form fields are not displayed correctly and the table row is growing in height, while content below is dropped down.

    I am trying to have a form with fields placed inside table rows, when I click on the first select statement, javascript code checks the value selected and if it is the first row, it should display the two form fields below, eg. tables rows.
    The rows are set to "display none" by default.

    Is there any way to fix? thanks!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<title>Test Page</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<link rel="stylesheet" type="text/css" href="/style/layout.css" />
    	<style type="text/css">
    		th { background-color: #eee; }
    		#first_row, #second_row { display: none; }
    	</style>
    	<script type="application/javascript">
    		function visibility() 
    		{
    			var id_finitura = document.getElementById("id_finitura").value;
    			var first_row = document.getElementById("first_row");
    			var second_row = document.getElementById("second_row");
    		
    			if (id_finitura == '10') {
    				first_row.style.display = "inline";		
    				second_row.style.display = "inline";		
    			} else {
    				first_row.style.display = "none";		
    				second_row.style.display = "none";				
    			}
    		
    		}    
        </script>
    </head>
    <body>
    <form method="post" action="#" >
    	<table>
    		<tr>
    			<th scope="row" style="vertical-align: top;">Select value</th>
    			<td><select id="id_finitura" name="id_finitura[]" multiple="multiple" onclick="visibility();">
                        <option value="10">000 Use Text Fields</option>
                        <option value="1">001 bla bla</option>
                        <option value="2">002 bla bla bla</option>
                        <option value="3">003 bla bla bla bla</option>
                     </select>
    			</td>
    		</tr>
    		<tr id="first_row">
    			<th scope="row">txt 1</th>
    			<td><input type="text" name="a" value="1234" id="a" /></td>
    		</tr>
    		<tr id="second_row">
    			<th scope="row">txt 2</th>
    			<td><input type="text" name="b" value="5678" id="b" /></td>
    		</tr>
            <tr>
    			<th>More text</th>	
            	<td>&nbsp;</td>
            </tr>
    	</table>
    </form>
    </body>
    </html>
    Last edited by fauzzo; Jan 16, 2008 at 13:28.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •