You are here: irt.org | FAQ | DHTML | Q574 [ previous next ]
The following will do the job in Netscape Navigator 4+ and Internet Explorer 4+:
<html>
<head>
<script language="JavaScript"><!--
rowArray = new Array();
rowArray[1] = '<form>Row 1: <input type="button" value="Reveal" onClick="clicked(2)"><\/form>';
rowArray[2] = 'This is some text for row 1';
rowArray[3] = '<form>Row 3: <input type="button" value="Reveal" onClick="clicked(4)"><\/form>';
rowArray[4] = 'Row 4 when clicked reveals this text';
rowArray[5] = '<form>Row 5: <input type="button" value="Reveal" onClick="clicked(6)"><\/form>';
rowArray[6] = '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;
else if (document.layers) {
document.layers['myTable'].document.open();
document.layers['myTable'].document.writeln(output);
document.layers['myTable'].document.close();
}
}
function clicked(x) {
viewArray[x] = !viewArray[x];
refreshTable();
}
//--></script>
</head>
<body onLoad="refreshTable()">
<span id="myTable" style="position:absolute"></span>
</body>
</html>