Code:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>
table {
border: 1px solid black;
}
table td {
margin: 5px;
padding: 5px;
border: 1px dotted black;
}
thead.collapse td {
padding-left: 20px;
background: transparent url('iconCollapse.gif') no-repeat 5px center;
}
thead.expand td {
padding-left: 20px;
background: transparent url('iconExpand.gif') no-repeat 5px center;
}
.hidden {display: none;}
</style>
<script>
<!--
function expandCollapse(obj) {
// Go through each row, hiding it or showing it...
var tableBody = obj.nextSibling;
var bodyRows = tableBody.getElementsByTagName('tr');
for(var rowsI = 0; rowsI < bodyRows.length; rowsI++) {
if (bodyRows[rowsI].parentNode==tableBody){
if(obj.className == 'collapse'){
bodyRows[rowsI].className = 'hidden';
}
else if(obj.className == 'expand'){
bodyRows[rowsI].className = '';
}
}
}
// change our class
obj.className = obj.className == 'collapse'?'expand':'collapse';
}
function collapsibleTables(id) {
var allTables = document.getElementById(id);
var hdrs=allTables.getElementsByTagName('THEAD');
for(var z0 = 0; z0 < hdrs.length; z0++) {
// Change it's class, and give it an onclick
hdrs[z0].className = "collapse";
expandCollapse(hdrs[z0]);
hdrs[z0].onclick = function(){ expandCollapse(this); }
}
}
window.onload = function() {
// All the things to do when the window loads
collapsibleTables('tst');
}
-->
</script>
</head>
<body>
<table id="tst" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead><tr><td>Results of an experiment</td></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr>
<td>
<table>
<thead><tr><td>result 4 has several branches</td></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr>
<td>
<table>
<thead><tr><td>result 7 has several branches</td></tr></thead>
<tbody>
<tr><td>11</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Reply With Quote
Bookmarks