Hi,
I faced an issue of <div> usage.
I am trying to code the following:-
--------------------------------------------------------------
<tr bgcolor="#ffffff">
<div id="the_div" style="display:none;">
<td> TypeA:</td>
<td><select id=supershort name="TypeA"
<option>123</option>
<option selected>456</option>
</select>
</td>
<td> TypeB:</td>
<td><select id=supershort name="TypeB"
<option selected>20</option>
<option>40</option>
</select>
</td>
<td> TypeC:</td>
<td><select id=supershort name="TypeC"
<option selected>D</option>
<option>HC</option>
</select>
</td>
</div>
</tr>
<td>
<input type=radio name=radio1 checked onclick="document.getElementById('the_div').style.display='none';"> Block
<input type=radio name=radio1 onclick="document.getElementById('the_div').style.display='block';"> Show
</td>
--------------------------------------------------------------
Weird thing is that the <div> hiding function works well for <TD></TD> section but when I try to hide the whole row <TR></TR> section it won't work.
Any clue why is it so?
Thanks a million for you guys help.
Regards.Originally posted by jacknbey
Any clue why is it so? From the HTML 4.01 DTD:
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/sgml/dtd.html">http://www.w3.org/TR/html401/sgml/dtd.html</a><!-- m -->
Which is to say that by definition TR elements require a start tag but the closing tags are optional and they can only directly contain one or more TH and TD elements. For your grouping pleasure, however, the TABLE element can contain COL, COLGROUP, THEAD, TBODY and TFOOT elements. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/tables.html">http://www.w3.org/TR/html401/struct/tables.html</a><!-- m --> .Hi,
Thanks for your link, I got rather confused over the documentation in the link.
Do you mind to quote me a simple example how can I hide a row in a table?
Regards.Just use comments, "<!-- <tr> ... </tr> -->".Hi Charles,
Thanks for your reply... I didn't make myself clear in this case...
Look at the sample below I am trying to hide/unhide the the_div when user select the respective radio button.
If I add the <!--<tr>..</tr>--> according to your earlier comment the whole row just not being displayed instead of triggerable.
May I know how to make the radio button trigger works at the <tr> level?
Thank you so much for your help, really appreciated.
Regards.
-------------------------------------
<html>
<body>
<table width=30% border=1 cellspacing=0 cellpadding=0>
<!--<tr>
<div id="the_div" style="display:none;">
<td>
Username <input type=text name=Username>
</td>
<td>
Password <input type=password name=password>
</td>
</div>
</tr>-->
<tr>
<td>
<input type=radio name=radio1 checked onclick="document.getElementById('the_div').style.display='none';"> Block
<input type=radio name=radio1 onclick="document.getElementById('the_div').style.display='block';"> Show
</td>
</tr>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<style type="text/css">
<!--
form {width:15em}
fieldset {padding:1ex}
label {display:block}
#logOn label {text-align:right}
button {display:block; margin:auto}
.hide {display:none}
-->
</style>
<script type="text/javascript">
<!--
// As one in ten users do not use JavaScript it is important to hide the elements with JavaScript. Otherwise they would never become visible for those good users.
onload = function () {document.getElementById ('logOn').className = 'hide'}
// -->
</script>
</head>
<body>
<!-- It is very bad to use TABLEs for layout. -->
<form action="spme-script.pl">
<fieldset id="logOn">
<legend>Log on</legend>
<label>User name <input name="userName" type="text"></label>
<label>Passord <input name="password" type="password"></label>
</fieldset>
<fieldset>
<label><input checked name="radio1" type="radio" onclick="document.getElementById ('logOn').className = this.checked ? 'hide' : ''"> Hide</label>
<label><input name="radio1" type="radio" onclick="document.getElementById ('logOn').className = this.checked ? '' : 'hide'"> Show</label>
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>You can set the display:none property on the table row. The only valid child element of a <tr> is another table element (<td><th>). The <div> in that position is invalid. If you turn a table row off, you have to fork the display value (ie = display:block, mozilla/safari = display:table-row).
I faced an issue of <div> usage.
I am trying to code the following:-
--------------------------------------------------------------
<tr bgcolor="#ffffff">
<div id="the_div" style="display:none;">
<td> TypeA:</td>
<td><select id=supershort name="TypeA"
<option>123</option>
<option selected>456</option>
</select>
</td>
<td> TypeB:</td>
<td><select id=supershort name="TypeB"
<option selected>20</option>
<option>40</option>
</select>
</td>
<td> TypeC:</td>
<td><select id=supershort name="TypeC"
<option selected>D</option>
<option>HC</option>
</select>
</td>
</div>
</tr>
<td>
<input type=radio name=radio1 checked onclick="document.getElementById('the_div').style.display='none';"> Block
<input type=radio name=radio1 onclick="document.getElementById('the_div').style.display='block';"> Show
</td>
--------------------------------------------------------------
Weird thing is that the <div> hiding function works well for <TD></TD> section but when I try to hide the whole row <TR></TR> section it won't work.
Any clue why is it so?
Thanks a million for you guys help.
Regards.Originally posted by jacknbey
Any clue why is it so? From the HTML 4.01 DTD:
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/sgml/dtd.html">http://www.w3.org/TR/html401/sgml/dtd.html</a><!-- m -->
Which is to say that by definition TR elements require a start tag but the closing tags are optional and they can only directly contain one or more TH and TD elements. For your grouping pleasure, however, the TABLE element can contain COL, COLGROUP, THEAD, TBODY and TFOOT elements. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/tables.html">http://www.w3.org/TR/html401/struct/tables.html</a><!-- m --> .Hi,
Thanks for your link, I got rather confused over the documentation in the link.
Do you mind to quote me a simple example how can I hide a row in a table?
Regards.Just use comments, "<!-- <tr> ... </tr> -->".Hi Charles,
Thanks for your reply... I didn't make myself clear in this case...
Look at the sample below I am trying to hide/unhide the the_div when user select the respective radio button.
If I add the <!--<tr>..</tr>--> according to your earlier comment the whole row just not being displayed instead of triggerable.
May I know how to make the radio button trigger works at the <tr> level?
Thank you so much for your help, really appreciated.
Regards.
-------------------------------------
<html>
<body>
<table width=30% border=1 cellspacing=0 cellpadding=0>
<!--<tr>
<div id="the_div" style="display:none;">
<td>
Username <input type=text name=Username>
</td>
<td>
Password <input type=password name=password>
</td>
</div>
</tr>-->
<tr>
<td>
<input type=radio name=radio1 checked onclick="document.getElementById('the_div').style.display='none';"> Block
<input type=radio name=radio1 onclick="document.getElementById('the_div').style.display='block';"> Show
</td>
</tr>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<style type="text/css">
<!--
form {width:15em}
fieldset {padding:1ex}
label {display:block}
#logOn label {text-align:right}
button {display:block; margin:auto}
.hide {display:none}
-->
</style>
<script type="text/javascript">
<!--
// As one in ten users do not use JavaScript it is important to hide the elements with JavaScript. Otherwise they would never become visible for those good users.
onload = function () {document.getElementById ('logOn').className = 'hide'}
// -->
</script>
</head>
<body>
<!-- It is very bad to use TABLEs for layout. -->
<form action="spme-script.pl">
<fieldset id="logOn">
<legend>Log on</legend>
<label>User name <input name="userName" type="text"></label>
<label>Passord <input name="password" type="password"></label>
</fieldset>
<fieldset>
<label><input checked name="radio1" type="radio" onclick="document.getElementById ('logOn').className = this.checked ? 'hide' : ''"> Hide</label>
<label><input name="radio1" type="radio" onclick="document.getElementById ('logOn').className = this.checked ? '' : 'hide'"> Show</label>
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>You can set the display:none property on the table row. The only valid child element of a <tr> is another table element (<td><th>). The <div> in that position is invalid. If you turn a table row off, you have to fork the display value (ie = display:block, mozilla/safari = display:table-row).