Here is a simplified version of a problem I am currently facing at work. The code runs as it should in Firefox 3.6. When a row is clicked, Javascript changes its class name and the properties of the children elements should change too.
In IE6 and maybe other versions, however, it only works for the "title1" and "title2" TDs: they change color. What doesn't work is "value1" and "value2" changing from display:none to their default value. I have tried working with the style.display attribute of the TDs to no avail.
Any help would be greatly appreciated.
<!doctype html>
<html>
<head>
<style type="text/css">
table#input{
width: 100%;
border-collapse: collapse;
}
table#input tr{
border-bottom: 1px solid #333;
}
table#input td{
padding: 4px;
}
tr.disabled td.key{
color: #ccc;
}
tr.disabled td.value{
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(rowElem){
rowElem.className = (rowElem.className == 'disabled') ? 'enabled' : 'disabled';
}
</script>
</head>
<body>
<table id="input">
<tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title1</td><td class="value">value1</td></tr>
<tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title2</td><td class="value">value2</td></tr>
</table>
</body>
</html>
I came up with an alternate solution that works in FF and IE6-8. For each TD with class="value", I enclosed the content with span tags and made the following change to the style sheet:
tr.disabled td.value span{
position: absolute;
top: -20px;
}
Now when a row is disabled, all the value content should be hidden off screen.