Forum Moderators: not2easy
The code below shows and hides a table within a row when a specific form field option is selected. The reason I placed a table within a row, is because the row ID should display all three rows within the second table, when the "Yes" field is selected.
The show/hide works fine, but the table does not span the three columns even though <td colspan="3"> is present. I have narrowed the cause down to the
display: blockHere's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
}
// ]]>
</script>
</head>
<body><form action="">
<table width="430" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>
<div>Blah</div>
</td>
<td>
<select onchange="display(this,'Yes');" id="arranged" name="arranged">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<div>Required</div>
</td>
</tr>
<tr style="display: block;" id="Yes">
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" align="right"><div>Info 1</div></td>
<td valign="top">
<input type="text" name="info_1" id="info_1"/>
</td>
<td> </td>
</tr>
<tr>
<td valign="top" align="right"><div>Info 2</div></td>
<td valign="top">
<input type="text" id="info_2" name="info_2"/>
</td>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
I've tried changing the display: block to display: inline, but that doesn't work. Any suggestions on how to fix or improve? Thanks
Then I got it to work using either of these, removing the inline declaration.
<tr style="background:#00ff66;" id="Yes">
or
<tr>
<td colspan="3" style="background:#00ff66;" id="Yes">
Background added to make sure it was working. :-)
Not related to the problem, you will get weird table displays in IE with empty cells, do this:
<td> </td>
if it becomes a problem.
A small optimization of your function, works either way but I'm retentive about this stuff. :-)
function display(obj,id1) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = (txt.match(id1))?'':'none';
}
I never (ab)use tables for layout so I really have no experience with setting table components' display settings, but I'd presume modern/future browsers would use the display:table-* properties for rendering html tables and setting it away from that might well dramatically change how your table acts.
Maybe: setting the visibility to hidden instead of the display to none is a far cleaner option.
swa66, I tried using your suggestion of visibility: visible / hidden, however this does not collapse the row. I didn't test visibility: collapse. Thanks for the forewarning.
