Currently, I am facing an issue at work that involves a piece of code. The code functions correctly in Firefox 3.6 where clicking on a row changes its class name and should also change the properties of the child elements. However, in IE6 and possibly other versions, only the "title1" and "title2" table data (TD) elements change color as expected. The problem lies with the "value1" and "value2" TDs not changing from display:none to their default value when clicked. I have tried using the style.display attribute for the TDs but it did not solve the issue.
I would greatly appreciate any assistance or guidance regarding this matter.
<!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>