Member Avatar for abs0lut01 
<!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>

<body>
<table>
<tr>
<td></td><td></td>
<div id="myDiv" style="display: none">
<input type="text" /><input type="text" /><input type="text" />
</div></tr></table>
<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>
</body>
</html>

The 3 input text will show if I click the Show link. I need to table the 3 input text.
please help me...

  • 7 Contributors
  • 8 Replies
  • 264 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by rexibit
Member Avatar for Thirusha

Can u give a further explanantion, i dont understand what u want to do.

Member Avatar for mexabet

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:

<!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>

<body>
<div id="myDiv" style="display: none">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="4">
    <tr>
      <td>Text 1</td>
      <td><input type="text" name="textfield" /></td>
    </tr>
    <tr>
      <td>Text 2</td>
      <td><input type="text" name="textfield2" /></td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td><input type="text" name="textfield3" /></td>
    </tr>
  </table>
</div>
<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>
</body>
</html>
commented: good job +1
Member Avatar for abs0lut01 
<!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>

<body>
<table>
<tr>
<td>text1</td><td>text2</td><td>text3</td>
<div id="myDiv" style="display: none">
<input type="text" /><input type="text" /><input type="text" />
</div></tr></table>
<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>
</body>
</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..

Member Avatar for Shanti C

this is your table having text fields:

<table width="291" id="prl" style="display:none">
  <tr>
    <td width="95">message</td>
    <td width="196"><input name="message" type="text" id="message" ></td>
  </tr>
  <tr>
    <td>name</td>
    <td><input name="name" type="text" id="name"></td>
  </tr>
  
 
  </table>

this is your link to show the text boxes:

<a href="#" onClick="toggle_it('prl')">show</a>

include this script in your page:

<script language="javascript">
  function toggle_it(itemID){
      // Toggle visibility between none and inline
      if ((document.getElementById(itemID).style.display == 'none'))
      {
        document.getElementById(itemID).style.display = 'inline';
      } else {
        document.getElementById(itemID).style.display = 'none';
      }
  }
</script>
Member Avatar for sreein1986

this is your table having text fields:

<script language="javascript">
  function toggle_it(itemID){
      // Toggle visibility between none and inline
      if ((document.getElementById(itemID).style.display == 'none'))
      {
        document.getElementById(itemID).style.display = 'inline';
      } else {
        document.getElementById(itemID).style.display = 'none';
      }
  }
</script>

What is the need of javascript code ....

Member Avatar for Shanti C

What is the need of javascript code ....

the table will show after clicks on the show hyperlink:

<a href="#" onClick="toggle_it('prl')">show</a>

all this is done by javascript....

Member Avatar for MidiMagic

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.

Member Avatar for rexibit

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.