I am trying to create a tree table (javascript code was adopted from
online source) but the rowspan in td tag does not work well when I
toggle the rows. Here is the sample code, notice the row "4" should be
in the Type 1 section (click on the arrow and expand it, it will
display correctly), but when it is collapsed, it is pushed downwards to
Type 2 section. Could not figure out what is the reason. Any ideas?
Thanks!
<html>
<head>
<style type="text/css">
..tier1 { margin-left: 0; }
..tier2 { margin-left: 1.5em; }
..folder { background:
url(http://cool.zoto.com/img/16x16x1/a85...213d9a606-.jpg)
no-repeat; float: left; height: 14px; width: 16px; padding-right: 3px
}
table {
width: 100%;
empty-cells: show;
border-collapse: collapse;
}
td {
border: 1px solid #d0d0d0;
padding: 1px;
vertical-align: top;
}
</style>
</script>
<script language="javascript1.2">
function toggleRows(elm) {
var rows = document.getElementsByTagName("TR");
elm.style.backgroundImage =
"url(http://cool.zoto.com/img/16x16x1/a85cc1b26a569459cdcb29d213d9a606-.jpg)";
var newDisplay = "none";
var thisID = elm.parentNode.parentNode.parentNode.id + "-";
// Are we expanding or contracting? If the first child is hidden, we
expand
for (var i = 0; i < rows.length; i++) {
var r = rows[i];
if (matchStart(r.id, thisID, true)) {
if (r.style.display == "none") {
if (document.all) newDisplay = "block"; //IE4+ specific code
else newDisplay = "table-row"; //Netscape and Mozilla
elm.style.backgroundImage =
"url(http://cool.zoto.com/img/16x16x1/65b6fbbbcda367eaea940bd14b5c1a85-.jpg)";
}
break;
}
}
// When expanding, only expand one level. Collapse all desendants.
var matchDirectChildrenOnly = (newDisplay != "none");
for (var j = 0; j < rows.length; j++) {
var s = rows[j];
if (matchStart(s.id, thisID, matchDirectChildrenOnly)) {
s.style.display = newDisplay;
var cell = s.getElementsByTagName("TD")[0];
var tier = cell.getElementsByTagName("DIV")[0];
var folder = tier.getElementsByTagName("A")[0];
if (folder.getAttribute("onclick") != null) {
folder.style.backgroundImage =
"url(http://cool.zoto.com/img/16x16x1/65b6fbbbcda367eaea940bd14b5c1a85-.jpg)";
}
}
}
}
function matchStart(target, pattern, matchDirectChildrenOnly) {
var pos = target.indexOf(pattern);
if (pos != 0) return false;
if (!matchDirectChildrenOnly) return true;
if (target.slice(pos + pattern.length, target.length).indexOf("-") >=
0) return false;
return true;
}
function collapseAllRows() {
var rows = document.getElementsByTagName("TR");
for (var j = 0; j < rows.length; j++) {
var r = rows[j];
if (r.id.indexOf("-") >= 0) {
r.style.display = "none";
//alert(r.id);
}
}
}
</script>
<title>SSTree Tree Table</title>
</head>
<body onload="collapseAllRows();">
<table border=1 width=100% cellspacing=0 ><tr><td class="header"
align='left'>Title</td></tr>
</table>
<table border=1 width=100% cellspacing=0 cellpadding=2px>
<tr>
<td align='left'>A</td>
<td align='left'>B</td>
<td align='left'>C</td>
<td align='left'>D</td>
<td align='left'>E</td>
</tr>
<tr id="1" class="a">
<td align='left'rowspan='5'>TYPE1</td>
<td><div class="tier1"><a onclick="toggleRows(this)"
class="folder"></a>1</div></td>
<td>ABCDE</td>
<td> </td>
<td> </td>
</tr>
<tr id="1-1" class="a">
<td><div class="tier2"><a class="doc"></a>2</div></td>
<td>ABCDE</td>
<td> </td>
<td> </td>
</tr>
<tr id="1-2" class="a">
<td><div class="tier2"><a class="doc"></a>3</div></td>
<td>ABCDE</td>
<td> </td>
<td> </td>
</tr>
<tr id="2" class="a">
<td ><div class="tier1"><a onclick="toggleRows(this)"
class="folder"></a>4</div></td>
<td>ABCDE</td>
<td> </td>
<td> </td>
</tr>
<tr id="2-1" class="a">
<td><div class="tier2"><a class="doc"></a>5</div></td>
<td>ABCDE</td>
<td> </td>
<td> </td>
</tr>
<tr id="3" class="a">
<td align='left'rowspan='3'>TYPE2</td>
<td ><div class="tier1"><a onclick="toggleRows(this)"
class="folder"></a>6</div></td>
<td>ABCDE</td>
<td> </td>
<td> </td>
</tr>
<tr id="3-1" class="a">
<td><div class="tier2"><a class="doc"></a>7</div></td>
<td>ABCDE</td>
<td> </td>
<td> </td>
</tr>
<tr id="3-2" class="a">
<td><div class="tier2"><a class="doc"></a>8</div></td>
<td> </td>
<td>ABCDE</td>
<td>ABCDE</td>
</tr>
</body>
</html>
