Brett wrote:
[snip][color=blue]
> Ok but why exactly doesn't it work in Netscape 7.2?[/color]
I'd guess because your logic is that all browsers support either
document.layers or document.all. That would be wrong - e.g. Safari.
Feature detection is great, but only if you use it correctly. Safari
(and I suspect Netscape 7.2) don't support either of the above, they
expect you to use document.getElementById or similar.
Also, explicitly putting content into arrays is time consuming and makes
life difficult, consider the code below (with feature detection for
getElementById). Watch for line wrapping, I can't manually wrap them
because of your code design.
Lastly, this is the craziest way I've seen to hide and show rows.
What's wrong with simply giving each row an id, then hide/show them by
modifying the display attribute? A re-write is below your fixed code -
I think you will find it vastly simpler.
You can also ditch the "<!-- //-->" junk to hide scripts unless you
think someone with Netscape 1.0 or Mosaic will use your page.
Fred.
Partial fix of original code:
<html>
<head>
<script language="JavaScript">
var rowArray = [
'empty',
'<form>Row 1: <input type="button" value="Reveal"
onClick="clicked(2)"><\/form>',
'This is some text for row 1',
'<form>Row 3: <input type="button" value="Reveal"
onClick="clicked(4)"><\/form>',
'Row 4 when clicked reveals this text',
'<form>Row 5: <input type="button" value="Reveal"
onClick="clicked(6)"><\/form>',
'Contents of the last row',
]
viewArray = new Array();
viewArray[1] = viewArray[3] = viewArray[5] = true;
viewArray[2] = viewArray[4] = viewArray[6] = false;
function refreshTable() {
var output = '<table border="1" width="500">';
for (var i = 1; i <= rowArray.length; i++) {
if (viewArray[i])
output += '<tr><td>' + rowArray[i] + '<\/td><\/tr>';
}
output += '<\/table>';
if (document.all) {
document.all('myTable').innerHTML = output;
alert('Using doc.all');
} else {
if (document.layers) {
alert('Using doc.layers');
document.layers['myTable'].document.open();
document.layers['myTable'].document.writeln(output);
document.layers['myTable'].document.close();
} else {
if (document.getElementById) {
document. getElementById('myTable').innerHTML = output;
alert('Using doc.GEBI\n' + output);
}
}
}
}
function clicked(x) {
viewArray[x] = !viewArray[x];
refreshTable();
}
</script>
</head>
<body onLoad="javascript
:refreshTable();">
<span id="myTable" style="position:absolute"></span>
</body>
</html>
Version using element attributes:
<html>
<head><title>Show/Hide Rows</title>
<script type="text/javascript">
function showHide(r) {
if (r.style.display == '') {
r.style.display = 'none';
} else {
r.style.display = '';
}
}
</script>
</head>
<body>
<table>
<tr id="row1">
<td>Here is cell 1
<form action="">
<input type="button" value="show/hide row 2"
onclick="showHide(document.getElementById('row2')) "
</td>
</tr><tr id="row2">
<td>Here is cell 2</td>
</tr>
</table>
</body>
</html>
