show/hide two table on click
| i'm 1 | i'm 1 | i'm 1 |
| i'm 2 | i'm 2 | i'm 2 |
| i'm 3 | i'm 3 | i'm 3 |
code goes here :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show/hide table onclick</title>
<style type="text/css">
/*
IE 5.5 does not actually support "table-row-group"
only "table-header-group" and "table-footer-group"
but I've found the following CSS renders correctly
*/
tbody.on { display:table-row-group; }
tbody.off { display:none; }
</style>
<script type="text/javascript">
function toggleTbody(id) {
if (document.getElementById) {
var tbod = document.getElementById(id);
if (tbod && typeof tbod.className == 'string') {
if (tbod.className == 'off') {
tbod.className = 'on';
} else {
tbod.className = 'off';
}
}
}
return false;
}
</script>
</head>
<body>
<h3>show/hide two table on click </h3>
<div style="float:left; width:200px; padding:5px;">
<table class="mygrid">
<th>hdr1</th>
<th>hdr2</th>
<th>hdr3</th>
<tr>
<td>one</td>
<td>one</td>
<td><a href="#" onclick="return toggleTbody('two');">one View</a></td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td><a href="#" onclick="return toggleTbody('two');">two View</a></td>
</tr>
<tr>
<td>three</td><td>three</td>
<td><a href="#" onclick="return toggleTbody('two');">three View</a></td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; padding-left:20px; ">
<!--<a href="#" onclick="return toggleTbody('two');">Toggle tbody two</a>-->
<table >
<tbody id="two">
<tr>
<td>1</td><td>1</td>
<td>3</a></td>
</tr>
<tr>
<td>2</td><td>2</td>
<td>2</a></td>
</tr>
<tr>
<td>3</td><td>3</td>
<td>3</a></td>
</tr>
</tbody>
</table>
</div>
<!-- author abhishek-->
</body>
</html>
No comments:
Post a Comment
Do you think it could be useful for you? Share your thoughts with us!