|
|
Hi Chaps,
I have a table of data, grouped by Month, Year and then ProjectID:
- Month, Year
- ProjectID
- Job1
- Job2
The Month, Year row controls a collapsable row (ProjectID) and in turn, the ProjectID row controls the Job row(s).
The problem I'm having is that if the Job row(s) is open, then 'close' the Month, Year row, the Job row(s) stay visible. How can I control all 'child' rows from the 'parent' Month, Year control?
<?php
$previousProject = '';
$previousMonth ='';
if ($totalRows_rsInvPending > 0) {
// Show if recordset not empty
do {
if ($previousProject != $row_rsInvPending['projid']) {
if ($previousMonth != $row_rsInvPending['themonth']) {
// for every Project, show the Project ID
?>
<tr>
<td colspan="18" class="highlight"><span class="blueBold"><a href="#" onclick="toggle2('month1<?php echo $row_rsInvPending['themonth'] ?>', this)"><img src="/Images/plus.gif" border="0" /></a>Â <?php echo $row_rsInvPending['theyear'] ?>Â -Â </a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['themonth'] ?></em></span></td>
</tr>
<?php $previousMonth = $row_rsInvPending['themonth']; } ?>
<tr class="month1<?php echo $row_rsInvPending['themonth'] ?>" style="display:none">
<td colspan="20" class="highlight1"><span class="blueBold"><a href="#" onclick="toggle2('proj1<?php echo $row_rsInvPending['projid'] ?>', this)"><img src="/Images/plus.gif" border="0" /></a>Â <?php echo $row_rsInvPending['projid'] ?>Â -Â </a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['projtitle'] ?></em></span></td>
</tr>
<?php $previousProject = $row_rsInvPending['projid']; } ?>
<tr class="proj1<?php echo $row_rsInvPending['projid'] ?>" style="display:none">
<td><?php echo $row_rsInvPending['jobname']; ?></td> |
|
function toggle2(id, obj) {
var matchingElements = new Array();
if (document.getElementsByClassName) {
matchingElements = document.getElementsByClassName(id);
} else {
var elements = document.getElementsByTagName("tr");
for (i = 0; i < elements.length; i++) {
if (elements.className == id) {
matchingElements[matchingElements.length] = elements;
}
}
}
for (i = 0; i < matchingElements.length; i++) {
toggleDisplay(matchingElements, obj);
}
}
function toggleDisplay(element, obj) {
if (element.style.display == "none") {
element.style.display = "block";
obj.innerHTML = "<img src=\"../../Images/minus.gif\" border=\"0\">";
} else {
element.style.display = "none";
obj.innerHTML = "<img src=\"../../Images/plus.gif\" border=\"0\">";
}
}
|
|
|
|
|
|
|
|
|
|
koolsamule
