<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hiding Information in Rows and Cells Sample</title>
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-1">
<meta name="AUTHOR" content="InetSDK">
<meta name="MS.LOCALE" content="EN-US">
<meta name="ROBOTS" content="noindex">
<link rel="stylesheet" href="samplesSDKIE4.css" type="text/css">
<style type="text/css">
td {
border: 1px solid;
}
</style>
<script type="text/javascript">
function getPets() {
tblChoice1.style.display="none";
tblChoice2.style.display="";
tblChoice3.style.display="none";
}
function getOthers() {
tblChoice1.style.display="";
tblChoice2.style.display="none";
tblChoice3.style.display="";
}
function getFast() {
tblChoice1_1.style.visibility="visible";
tblChoice2_1.style.visibility="visible";
tblChoice3_1.style.visibility="hidden";
}
function getSlow() {
tblChoice1_1.style.visibility="hidden";
tblChoice2_1.style.visibility="hidden";
tblChoice3_1.style.visibility="visible";
}
function showallRows() {
tblChoice1.style.display="";
tblChoice2.style.display="";
tblChoice3.style.display="";
}
function showallCells() {
tblChoice1_1.style.visibility="visible";
tblChoice2_1.style.visibility="visible";
tblChoice3_1.style.visibility="visible";
}
</script>
</head>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->
<body>
<div class="body">
<h1>Hiding Information in Rows and Cells Sample</h1>
<p>This example shows use of the <b>display</b> property applied to table rows
and the <b>visibility</b> property applied to table cells. Each button calls
a function that sets the display properties depending on the user's selection.</p>
<p>Displaying cells within a row is dependent on the row being displayed. Accordingly,
displaying a cell with an animal's speed will show only if the corresponding
row is also displayed. </p>
<p>Note that an embedded style sheet sets the <b>td</b> element's style to {border:
1px solid}. </p>
<center>
<table>
<tr id="tblChoice1">
<td>Horses</td>
<td id="tblChoice1_1">Thoroughbreds</td>
<td>Fast</td>
</tr>
<tr id="tblChoice2">
<td>Dogs</td>
<td id="tblChoice2_1">Greyhounds</td>
<td>Fast</td>
</tr>
<tr id="tblChoice3">
<td>Marsupials</td>
<td id="tblChoice3_1">Oppossums</td>
<td>Slow</td>
</tr>
</table>
<p>
<input type="button" style="width: 150px" ="getPets()" value="Show household pets">
<input type="button" style="width: 150px" ="getOthers()" value="Show outdoor pets">
</p>
<p>
<input type="button" style="width: 150px" ="getFast()" value="Show fast animals">
<input type="button" style="width: 150px" ="getSlow()" value="Show slow animals">
</p>
<p>
<input type="button" ="showallCells();showallRows()" value="Refresh">
</p>
</center>
<!-- START_PAGE_FOOTER --><br>
<br>
<br>
<p class="viewsource">[Right-click and choose View Source from the shortcut
menu.] </p>
<a class="copyright" href="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm">
?2007 Microsoft Corporation. All rights reserved. Terms of use.</a>
<!-- END_PAGE_FOOTER --></div>
</body>
</html>