Help!! HTML rowspan does not work with a tree table?

S

smilecry

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/a85cc1b26a569459cdcb29d213d9a606-.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;
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>&nbsp;</td>
<td>&nbsp;</td>
</tr>


<tr id="1-1" class="a">
<td><div class="tier2"><a class="doc"></a>2</div></td>
<td>ABCDE</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr id="1-2" class="a">
<td><div class="tier2"><a class="doc"></a>3</div></td>
<td>ABCDE</td>
<td>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr id="2-1" class="a">
<td><div class="tier2"><a class="doc"></a>5</div></td>
<td>ABCDE</td>
<td>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr id="3-1" class="a">
<td><div class="tier2"><a class="doc"></a>7</div></td>
<td>ABCDE</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr id="3-2" class="a">
<td><div class="tier2"><a class="doc"></a>8</div></td>
<td>&nbsp;</td>
<td>ABCDE</td>
<td>ABCDE</td>
</tr>

</body>
</html>
 
R

RobG

smilecry said:
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?
Click to expand...

This is actually an HTML (or maybe CSS) problem and nothing to do with
JavaScript. When you "hide" an element using display:none, it is
completely removed from the document flow, as if it wasn't there:

"Please note that a display of 'none' does not create an invisible
box; it creates no box at all."
<URL: http://www.w3.org/TR/CSS21/visuren.html#x17 >

Therefore when you "hide" some rows, your rowspan encompasses rows that
previously weren't within its scope because the intervening rows are no
longer in the flow.


[...]
<script language="javascript1.2">
Click to expand...

The language attribute is deprecated, type is required. In particular,
*never* use that particular value for a language attribute unless you
are certain of the ramifications and know that they are required.

[...]
<tr id="1" class="a">
Click to expand...

The value of an ID attribute can't start with a digit (it can contain
digits though).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sort by number of characters 1
Angularjs newbie - second JSON datasource does not display 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Javascript DOM 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Filter table rows based on multiple checkboxes value 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 35 (members: 1, guests: 34)
Robots: 433

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top