stephenmbell
IS-IT--Management
I am trying to implement expand collapse functionality in an html table.
I am using aptana and firebug to debug this.
I think the problem is coming on this line, but I cannot figure out why..
var tr = img.parentNode.parentNode;
var next_tr = tr.nextSibling; // this is the problem line... what is happening?
Thanks in advance for any responses
sb
Here is my html code:
Here is my javascript file:
I am using aptana and firebug to debug this.
I think the problem is coming on this line, but I cannot figure out why..
var tr = img.parentNode.parentNode;
var next_tr = tr.nextSibling; // this is the problem line... what is happening?
Thanks in advance for any responses
sb
Here is my html code:
Code:
<html>
<head>
<title>Test Page</title>
<script src="ExpandCollapse.js" type="text/javascript">
</script>
</head>
<body>
<table id="myTable" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<tr>
<th scope="col"> </th>
<th scope="col">Heading A</th>
<th scope="col">Heading B</th>
<th scope="col">Heading C</th>
</tr>
<tr>
<td>
<img src="images/expand_plus.png" onClick="expandCollapse(this);" />
<div style="display:none">
<table>
<tr>
<td><img src="images/expand_plus.png" /></td>
<td>Sub Row 1 - A</td>
<td>Sub Row 1 - B</td>
<td>Sub Row 1 - C</td>
</tr>
</table>
</div>
</td>
<td>Row 1 - A</td>
<td>Row 1 - B</td>
<td>Row 1 - C</td>
</tr>
<tr>
<td><img src="images/expand_plus.png" onClick="expandCollapse(this);" /></td>
<td>Row 2 - A</td>
<td>Row 2 - B</td>
<td>Row 2 - C</td>
</tr>
<tr>
<td><img src="images/expand_plus.png" onClick="expandCollapse(this);" /></td>
<td>Row 3 - A</td>
<td>Row 3 - B</td>
<td>Row 3 - C</td>
</tr>
<tr>
<td><img src="images/expand_plus.png" onClick="expandCollapse(this);" /></td>
<td>Row 4 - A</td>
<td>Row 4 - B</td>
<td>Row 4 - C</td>
</tr>
<tr>
<td><img src="images/expand_plus.png" onClick="expandCollapse(this);" /></td>
<td>Row 5 - A</td>
<td>Row 5 - B</td>
<td>Row 5 - C</td>
</tr>
</table>
</body>
</html>Here is my javascript file:
Code:
function expandCollapse(img)
{
var table;
var columnCount;
var src;
// get a reference to the table tag
table = document.getElementById(img.parentNode.parentNode.parentNode.parentNode.id);
// count the number of columns in the table
columnCount = document.getElementById(table.id).getElementsByTagName('tr')[0].getElementsByTagName('th').length
src = img.getAttribute('src');
if (src.indexOf('plus') > 0)
{
/*
if the image name has "plus" in it - switch the image to minus
and expand the row
*/
img.src = src.replace('plus', 'minus');
// expand the row
// get a reference to the current row where the image is
var tr = img.parentNode.parentNode;
// get a reference to the next row from where the image is
var next_tr = tr.nextSibling; // this is the problem line... what is happening?
// get a reference to the <tbody> tag of the grid
var tbody = tr.parentNode;
// get a reference to the image's column (td tag)
var td = img.parentNode;
var detailNode;
// loop through the content of the image's column. if a hidden div is found, get a reference
for(var j=0; j<td.childNodes.length; j++)
{
if(td.childNodes[j].nodeType == 1)
{
if(td.childNodes[j].nodeName.toLowerCase() == 'div')
{
detailNode = td.childNodes[j].cloneNode(true);
detailNode.setAttribute('style', '');
}
}
}
// create a new table row for the "expand"
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var newfirsttd = newtd.cloneNode(true);
// insert an empty cell first
newfirsttd.innerHTML = ' ';
newtr.appendChild(newfirsttd);
// set the colspan element = to the number of columns in the table
newtd.colSpan = columnCount;
// insert the hiden div's contents into the new row
//newtd.innerHTML = detailNode.innerHTML;
newtd.innerHTML = '<p> Expanded Text</p>'
newtr.appendChild = (newtd);
tbody.insertBefore(newtr, next_tr);
}
else
{
/*
the image currently displayed is the minus, we have to switch it to plus
and collapse the expanded row
*/
img.src = src.replace('minus', 'plus');
// collapse the row that was created
var row = img.parentNode.parentNode;
var rowsibling = row.nextSibling;
var rowParent = row.parentNode;
rowParent.removeChild(rowSibling);
}
}