943,919 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > td under div
Ad:
Permalink
Jul 28th, 2008
0

td under div

Expand Post »
HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. </head>
  7.  
  8. <body>
  9. <table>
  10. <tr>
  11. <td></td><td></td>
  12. <div id="myDiv" style="display: none">
  13. <input type="text" /><input type="text" /><input type="text" />
  14. </div></tr></table>
  15. <a href="#" onclick="if(document.getElementById('myDiv').style.display=='block'){ document.getElementById('myDiv').style.display='hidden'; } else{ document.getElementById('myDiv').style.display='block';}">Show</a>
  16. </body>
  17. </html>
The 3 input text will show if I click the Show link. I need to table the 3 input text.
please help me...
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
abs0lut01 is offline Offline
5 posts
since Jul 2008
Permalink
Jul 28th, 2008
0

Re: td under div

Can u give a further explanantion, i dont understand what u want to do.
Reputation Points: 36
Solved Threads: 57
Posting Whiz
Thirusha is offline Offline
355 posts
since Mar 2008
Permalink
Jul 28th, 2008
1

Re: td under div

Since you didn't explain in details, I can only guess. If structuring the three text fields with a table is your need, see if this modification helps:

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. </head>
  7.  
  8. <body>
  9. <div id="myDiv" style="display: none">
  10. <table width="100%" border="0" align="center" cellpadding="0" cellspacing="4">
  11.     <tr>
  12.       <td>Text 1</td>
  13.       <td><input type="text" name="textfield" /></td>
  14.     </tr>
  15.     <tr>
  16.       <td>Text 2</td>
  17.       <td><input type="text" name="textfield2" /></td>
  18.     </tr>
  19.     <tr>
  20.       <td>Text 3</td>
  21.       <td><input type="text" name="textfield3" /></td>
  22.     </tr>
  23.   </table>
  24. </div>
  25. <a href="#" onclick="if(document.getElementById('myDiv').style.display=='block'){ document.getElementById('myDiv').style.display='hidden'; } else{ document.getElementById('myDiv').style.display='block';}">Show</a>
  26. </body>
  27. </html>
Reputation Points: 16
Solved Threads: 9
Junior Poster
mexabet is offline Offline
148 posts
since Mar 2008
Permalink
Jul 28th, 2008
0

Re: td under div

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. </head>
  7.  
  8. <body>
  9. <table>
  10. <tr>
  11. <td>text1</td><td>text2</td><td>text3</td>
  12. <div id="myDiv" style="display: none">
  13. <input type="text" /><input type="text" /><input type="text" />
  14. </div></tr></table>
  15. <a href="#" onclick="if(document.getElementById('myDiv').style.display=='block'){ document.getElementById('myDiv').style.display='hidden'; } else{ document.getElementById('myDiv').style.display='block';}">Show</a>
  16. </body>
  17. </html>
I forgot text1, text2 and text3 before the div.. I need to structure the three text fields with a table.. When they click the show button it will show the input fields only..
Reputation Points: 10
Solved Threads: 0
Newbie Poster
abs0lut01 is offline Offline
5 posts
since Jul 2008
Permalink
Jul 29th, 2008
0

Re: td under div

this is your table having text fields:
php Syntax (Toggle Plain Text)
  1. <table width="291" id="prl" style="display:none">
  2.   <tr>
  3.     <td width="95">message</td>
  4.     <td width="196"><input name="message" type="text" id="message" ></td>
  5.   </tr>
  6.   <tr>
  7.     <td>name</td>
  8.     <td><input name="name" type="text" id="name"></td>
  9.   </tr>
  10.  
  11.  
  12.   </table>

this is your link to show the text boxes:
HTML and CSS Syntax (Toggle Plain Text)
  1. <a href="#" onClick="toggle_it('prl')">show</a>
include this script in your page:
javascript Syntax (Toggle Plain Text)
  1. <script language="javascript">
  2.   function toggle_it(itemID){
  3.       // Toggle visibility between none and inline
  4.       if ((document.getElementById(itemID).style.display == 'none'))
  5.       {
  6.         document.getElementById(itemID).style.display = 'inline';
  7.       } else {
  8.         document.getElementById(itemID).style.display = 'none';
  9.       }
  10.   }
  11. </script>
Reputation Points: 137
Solved Threads: 162
Posting Virtuoso
Shanti C is offline Offline
1,641 posts
since Jul 2008
Permalink
Jul 30th, 2008
0

Re: td under div

Click to Expand / Collapse  Quote originally posted by Shanti Chepuru ...
this is your table having text fields:
javascript Syntax (Toggle Plain Text)
  1. <script language="javascript">
  2.   function toggle_it(itemID){
  3.       // Toggle visibility between none and inline
  4.       if ((document.getElementById(itemID).style.display == 'none'))
  5.       {
  6.         document.getElementById(itemID).style.display = 'inline';
  7.       } else {
  8.         document.getElementById(itemID).style.display = 'none';
  9.       }
  10.   }
  11. </script>
What is the need of javascript code ....
Reputation Points: 12
Solved Threads: 34
Posting Whiz
sreein1986 is offline Offline
306 posts
since May 2008
Permalink
Jul 31st, 2008
0

Re: td under div

Click to Expand / Collapse  Quote originally posted by sreein1986 ...
What is the need of javascript code ....
the table will show after clicks on the show hyperlink:
HTML and CSS Syntax (Toggle Plain Text)
  1. <a href="#" onClick="toggle_it('prl')">show</a>
all this is done by javascript....
Reputation Points: 137
Solved Threads: 162
Posting Virtuoso
Shanti C is offline Offline
1,641 posts
since Jul 2008
Permalink
Jul 31st, 2008
0

Re: td under div

This is a fundamental HTML error.

The div tag cannot have the table tag or the tr tag as its parent. It must be either outside the table, or inside a td tag. And the only legal parent of a td tag is a tr tag.

Also, note that some browsers have trouble displaying a structure later, if it is initially not displayed.
Last edited by MidiMagic; Jul 31st, 2008 at 7:57 pm.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Aug 5th, 2008
0

Re: td under div

Well spotted Midi.

One thing that should also be pointed out is that Javascript should not be used for site functionality. If someone doesn't have JS enabled (a number of companies have it disabled on all employee computers), then they won't be able to use the form.

If you "must" hide the table, then consider using CSS's visibility attribute.
Reputation Points: 15
Solved Threads: 4
Junior Poster in Training
rexibit is offline Offline
55 posts
since Jun 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: IE7 adds blank space to all my website, in other browsers it looks normal
Next Thread in HTML and CSS Forum Timeline: Form select not working in IE





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC