Forum Moderators: open
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<style type="text/css">
#controls { /* Hide controls by default (for JavaScript disabled browsers) */
display: none;
}
tr.hidden {
background-color: #999;
}
tr.block {
background-color: #fff;
}
td.hidden {
background-color: #ccc;
}
td.block {
background-color: #fff;
}
</style>
<title></title>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
YAHOO.util.Event.on(window, 'load', function() {
// Onload, show the controls
YAHOO.util.Dom.setStyle('controls', 'display', 'block');
// and hide row 2 and col 2
var row2 = YAHOO.util.Dom.getElementsByClassName('row2');
var col2 = YAHOO.util.Dom.getElementsByClassName('col2');
YAHOO.util.Dom.addClass(row2, 'hidden');
YAHOO.util.Dom.addClass(col2, 'hidden');
// Attach functionality to the checkboxes to swap the classes
YAHOO.util.Event.on('rowViewer', 'click', function(e) {
if (YAHOO.util.Dom.hasClass(this, 'on')) {
// We're shutting them off
YAHOO.util.Dom.replaceClass(this, 'on', 'off');
YAHOO.util.Dom.replaceClass(row2, 'block', 'hidden');
}
else {
// We're turning them on
YAHOO.util.Dom.replaceClass(this, 'off', 'on');
YAHOO.util.Dom.replaceClass(row2, 'hidden', 'block');
}
});
YAHOO.util.Event.on('colViewer', 'click', function(e) {
if (YAHOO.util.Dom.hasClass(this, 'on')) {
// We're shutting them off
YAHOO.util.Dom.replaceClass(this, 'on', 'off');
YAHOO.util.Dom.replaceClass(col2, 'block', 'hidden');
}
else {
// We're turning them on
YAHOO.util.Dom.replaceClass(this, 'off', 'on');
YAHOO.util.Dom.replaceClass(col2, 'hidden', 'block');
}
});
});
</script>
</head>
<body>
<form action="">
<div id="controls">
<input type="checkbox" id="rowViewer">
<label for="rowViewer">Show row 2</label>
<input type="checkbox" id="colViewer">
<label for="rowViewer">Show col 2</label>
</div>
<table cellspacing="0">
<tr class="row1">
<td class="col1">1.1</td>
<td class="col2">1.2</td>
<td class="col3">1.3</td>
</tr>
<tr class="row2">
<td class="col1">2.1</td>
<td class="col2">2.2</td>
<td class="col3">2.3</td>
</tr>
<tr class="row3">
<td class="col1">3.1</td>
<td class="col2">3.2</td>
<td class="col3">3.3</td>
</tr>
</table>
</form>
</body>
</html>
<script>
function toggle_rows(elemId) {
row = document.getElementById(elemId);
if (row.style.display=='none') row.style.display = '';
else row.style.display = 'none';
}
</script>
<label for="1st">Show 1st row</label>
<input type="radio" name="1st" value="sumvalue" onchange="toggle_rows('1st')">
<label for="2nd">Show 2nd row</label>
<input type="radio" name="2nd" value="sumvalue" onchange="toggle_rows('2nd')">
<table border = 1>
<tr style="display:none" id="1st">
<td>1st row</td>
</tr>
<tr style="display:none" id="2nd">
<td>2nd row</td>
</tr>
</table>
