td under div

Question

abs0lut01 0 Newbie Poster

18 Years Ago

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

html-css user-interface web-design

7 Contributors
8 Replies
278 Views
1 Week Discussion Span
Latest Post 18 Years Ago Latest Post by rexibit

Dani AI

Generated 9 Months Ago

The real problem is invalid HTML and a brittle show/hide approach. A <div> cannot be a direct child of a <tr>; only <td> or <th> are allowed. That is why the inputs behaved oddly in some browsers (good point, ). Also the original script sets style.display = 'hidden', which is not a valid display value.

A simple, robust pattern is to keep the inputs inside a proper table row and hide that row with CSS, then toggle a class from a button (avoid href="#" anchors). The row will naturally render as a table row when the hiding class is removed, so there is no need to set display: table-row in script.

<style>
.hidden { display: none; }
</style>

<table>
  <tr>
    <td>text1</td><td>text2</td><td>text3</td>
  </tr>
  <tr id="inputsRow" class="hidden">
    <td><input name="a" type="text"></td>
    <td><input name="b" type="text"></td>
    <td><input name="c" type="text"></td>
  </tr>
</table>

<button id="toggle" aria-controls="inputsRow" aria-expanded="false">Show</button>

<script>
document.getElementById('toggle').addEventListener('click', function (e) {
  var row = document.getElementById('inputsRow');
  var nowHidden = row.classList.toggle('hidden'); // true if hidden after toggle
  this.setAttribute('aria-expanded', String(!nowHidden));
});
</script>

Notes and best practices: prefer classList.toggle over reading/writing inline style.display; use button for actions (better accessibility than a); update aria-expanded so assistive tech sees the change; use noscript or the semantic <details> element for a no‑JS fallback if the form must always be usable (echoing ’s progressive‑enhancement point). Credit to and for earlier structural and toggle ideas—this version fixes the invalid nesting and makes the show/hide reliable and accessible for modern browsers.

All 8 Replies

Thirusha 20 Posting Whiz

18 Years Ago

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

mexabet 49 Good Learner

18 Years Ago

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>

sreein1986 commented: good job +1

Reply to this topic

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.

abs0lut01 0 Newbie Poster · Answer 1 · 2008-07-29T04:27:22+00:00

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

Shanti C 106 Posting Virtuoso · Answer 2 · 2008-07-29T17:10:44+00:00

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>

sreein1986 0 Posting Whiz · Answer 3 · 2008-07-30T10:33:24+00:00

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

Shanti C 106 Posting Virtuoso · Answer 4 · 2008-07-31T14:54:46+00:00

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

MidiMagic 579 Nearly a Senior Poster · Answer 5 · 2008-08-01T04:55:50+00:00

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.

rexibit 5 Junior Poster in Training · Answer 6 · 2008-08-06T02:50:40+00:00

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.

td under div

Dani AI

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers