[jQuery] <select> does not hide() when within table with <col>
Hi,
I'm using jquery to show/hide part of the form (i.e. section of the
table) when checkbox is toggled.
I had a problem with section containing <select> controls - section
would hide, but selects would continue to float - only in IE (version
6.0), in FF everything's fine.
After some experimenting I noticed that problem appears only if table
contains <col> tags.
Workaround, other than getting rid of cols, was to specifically find
and toggle selects in addition to whole section.
Maybe someone would ideas why there is this problem.
Example:
<!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>
<script type='text/javascript' src='js/jquery.pack.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#togglelink').click(function() {
$("#selectrow").toggle();
return false;
});
});
</script>
</head>
<body>
<a href="" id="togglelink">Toggle table row</a>
<table >
<tr>
<col></col>
<col></col>
</tr>
<tr id="selectrow">
<th>Input</th>
<td >
<select >
<option value='0'>
<option value='1'>1
<option value='2'>2
<option value='3'>3
</select>
</td>
</tr>
</table>
</body>
</html>
Best Regards,
/B.