[...]
Get rid of the div. Put the id on the tr instead, and toggle its display
property between "table-row" and "none", rather than between "block" and
"none".
i.e.:
display = (checkbox.checked) ? "table-row" : "none";
document.getElementById(id).style.display = display;
IE 6 and IE 7 has no idea of 'table-row', you would be better of using
an empty string. Then IE can pretend you wanted 'display:block', while
normal browsers can assume you wantet 'display:table-row', i.e.:
display = (checkbox.checked) ? "" : "none";
That should work, but I haven't tested it, and nothing I say ever works
in IE.
Internet isn't compatible with IE. Internet has to die!
You might also want to look at visibility: collapse. I don't know the
level of browser support for that either, but in that case you'd be
using:
visibility = (checkbox.checked) ? "visible" : "collapse";
document.getElementById(id).style.visibility = visibility;
IE 6 and IE 7 has no idea of the value 'collapse' for the visibility
property.
And you'd also want to set it on the tr. In any case you have to get rid
of the div unless you put in either inside a table-cell or completely
outside the table.
Yes, get rid of the divs. Her is my suggestion:
<table>
<tr>
<td></td>
<td><input name="car" value="T" type="checkbox"
onclick="someFunction(this)">Car</td>
</tr>
<tr id="make">
<td>Make:</td>
<td><input id="made" size="20"></td>
</tr>
<tr id="model">
<td>Model:</td>
<td><input id="model" size="20"></td>
</tr>
</table>
....
<script type="text/javascript">
var oldonload = window.onload;
if (typeof oldonload !== 'function') {
window.onload = someOnloadFunction;
} else {
window.onload = function() {
oldonload();
someOnloadFunction();
}
}
function someOnloadFunction() {
document.getElementById("make").style.display = "none";
document.getElementById("model").style.display = "none";
}
function someFunction( checkbox ) {
display = ( checkbox.checked ) ? "" : "none";
document.getElementById("make").style.display = display;
document.getElementById("model").style.display = display;
}
</script>
You might want do the onload part simpler, like:
<body onload="someOnloadFunction()">
but that could override other onload functions in external scripts.
