Sketch,
It's a bit more complicated than you have. You'll have to set the display on each table cell as opposed to each table row, which isn't an issue in and of itself, but you run into some browser support issues. IE doesn't understand display: table-cell in CSS, so you have to set its display to block. However, Mozilla and Opera render block-displayed table cells very strangely, so we have to resort to JS hell: browser detection. However, I optimized your function well enough that it shouldn't matter, at least until IE7 is released.
HTML Code:
<html>
<head>
<style type="text/css">
/* commented these style rules out because they were messing the script up :)
#md1,#md2
{
display:none;
} */
table
{
border-collapse: collapse;
border-bottom: 1px solid black;
}
table td
{
border: 1px solid black;
padding: 4px;
}
</style>
<script type="text/javascript">
function getStyle(myVal) {
if (myVal == 1) {
//browsercheck by object model support :(
if (document.all && document.getElementById) {
return "block";
}
else if (document.getElementById && !document.all) {
return "table-cell";
}
else {
return "Not Supported";
}
}
if (myVal == 0) return "none";
}
function change(md1Display, md2Display, sdDisplay) {
//style variables, pass these into the getStyle() function to return the appropriate
//style for the browser we're targeting.
var styleMD1 = getStyle(md1Display);
var styleMD2 = getStyle(md2Display);
var styleSD = getStyle(sdDisplay);
//get all td tags for this TR
var mdCN1 = document.getElementById("md1").childNodes;
var mdCN2 = document.getElementById("md2").childNodes;
var sdCN = document.getElementById("sd").childNodes;
for (var x = 0; x < mdCN1.length; x++) {
mdCN1[x].style.display = styleMD1;
}
for (var x = 0; x < mdCN2.length; x++) {
mdCN2[x].style.display = styleMD2;
}
for (var x = 0; x < sdCN.length; x++) {
sdCN[x].style.display = styleSD;
}
}
window.onload = function () {change(0, 0, 1)};
</script>
</head>
<body>
<table>
<tr>
<td class="left">Event:</td>
<td class="right"> <label for="singledate">Single Date</label>
<input type="radio" name="datetype" id="singledate" value="0"
checked="checked" onclick="change(0, 0, 1);" />
<label for="multidate">Date Range</label>
<input type="radio" name="datetype" id="multidate" value="1"
onclick="change(1, 1, 0);" />
</td>
</tr>
<!--the TDs in these rows have to stay on one line,
otherwise Mozilla will count the newlines in the loop :(-->
<tr id="sd"><td> sd </td><td> sd </td></tr>
<tr id="md1"><td> md1 </td><td> md1 </td></tr>
<tr id="md2"><td> md2 </td><td> md2 </td></tr>
</table>
</body>
</html>
screenshot
Originally Posted by vgarcia
I didn't even know about the cells collection! Good tips.
Bookmarks