Avatar of BeckyBair
BeckyBairFlag for United States of America asked on

Add checkboxes to HTML TreeView?

I'm having a hard time adding checkboxes to this HTML treeview.  Using input doesn't work...  Ultimately I will be using XML/XSL files to populate this treeview.  I'm also having an issue with displaying the images and spacing of the treeview.  I am using Visual Studio 2008 to do my development in.  Below is the JavaScript, CSS and the HTML code.  I have also attached the graphics files in a zip file.
Here is my JavaScript code:
<!--  css.js file  -->
function swapClass(obj, cls) {
  obj.className = cls
}
 
<!--  treeHTML.js file  -->
var selectedEntity = null;
 
function clickOnEntity(entity) {
 
  if(entity.open == "false") {
    expand(entity, true);
  }
  else {
    collapse(entity);
  }
 
  selectedEntity = entity;
  window.event.cancelBubble = "true";
}
 
function expand(entity) {
  var stateImage;
  var oImage
 
  stateImage = document.all["stateImage" + entity.id];
  
  oImage = entity.childNodes(0).all["image"]
  oImage.src = entity.imageOpen
 
  if(stateImage)
  {
		stateImage.src = stateImage._open;
  }
 
  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes(i).tagName == "DIV") {
      entity.childNodes(i).style.display = "block"
    }
  }
  
  entity.open = "true"
}
 
function collapse(entity) {
  var stateImage;
  var oImage
  var i
 
  stateImage = document.all["stateImage" + entity.id];
 
  oImage = entity.childNodes(0).all["image"]
  oImage.src = entity.image
 
  if(stateImage)
  {
		stateImage.src = stateImage._closed;
  }
 
  for(i=0; i < entity.childNodes.length; i++) {
      if(entity.childNodes(i).tagName == "DIV") {
        if(entity.id != "folderTree") entity.childNodes(i).style.display = "none"
        collapse(entity.childNodes(i))
      }
    }
    
  entity.open = "false"
}
 
function expandAll(entity) {
  var oImage
  var i
 
  expand(entity, false)
 
  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes(i).tagName == "DIV") {
      expandAll(entity.childNodes(i))
    }
  }
}
 
<!--  tree.css -->
.bOver {
	font-family: Verdana;
	font-size: 10px;
	font-weight: bold;
	color: white;
	padding-top: 3px;
	padding-left: 5px;
	padding-bottom: 3px;
	padding-right: 5px;
	background-color: #99ccff;
	cursor: auto;
}
 
.bOut {
	font-family: Verdana;
	font-size: 10px;
	font-weight: bold;
	color: white;
	padding-top: 3px;
	padding-left: 5px;
	padding-bottom: 3px;
	padding-right: 5px;
	background-color: #5389bc;
	cursor: auto;
}
 
.tree_col1 {
	padding-left: 7px;
	font-family: Verdana;
	font-size: 11px;
	color: black;
}
 
.tree_col2 {
  padding-left: 7px;
  font-family: Verdana;
  font-size: 11px;
  color: black;
}
 
 
 
Here is my HTML page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="css/tree.css" />
    <script language="Javascript" src="tree/treeHTML.js"></script>
    <script language="Javascript" src="common/css.js"></script>
</head>
<body onselectstart="return false" topmargin="0" leftmargin="0">
    <table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%" style="">
        <tr>
            <td width="260" nowrap="true" style="border-right: 1px solid black;" valign="TOP">
<!-- Expand and Collapse Buttons -->
                <table border="0" width="100%" cellspacing="0" cellpadding="1" style="background-color: #5389bc;">
                    <tr>
                        <td>
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="180">
                                    </td>
                                    <td>
                                        Status
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
<!-- Folder Tree Container -->
                <div id="folderTree" style="padding-top: 8px;">
    <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
        ondragstart="return false" image="images/tinybox.gif" imageopen="images/tinybox.gif"
        id="fe1" open="false" style="cursor: hand;">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="images/Lplus.png" _open="images/Lminus.png" _closed="images/Lplus.png"
                        id="stateImagefe1" />
                </td>
                <td valign="middle">
                    <img border="0" id="image" src="images/tinybox.gif" />
                </td>
                <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                    onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                    padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                    ">
                    TCP
                </td>
                <td width="75px" nowrap="true" style="padding-left: 7px;  font-family: Verdana;
                     font-size: 11px; font-color: black;">
                </td>
            </tr>
        </table>
        <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
            ondragstart="return false" image="images/book.gif" imageopen="images/bookOpen.gif"
            id="fe2" open="false" style="display: none; cursor: hand;">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                        <img src="images/blank.png" /><img src="images/Tplus.png" _open="images/Tminus.png"
                            _closed="images/Tplus.png" id="stateImagefe2" />
                    </td>
                    <td valign="middle">
                        <img border="0" id="image" src="images/book.gif" />
                    </td>
                    <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                        onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                        padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                        ">
                        Subtest 1
                    </td>
                    <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                         font-size: 11px;  font-color: black; ">
                    </td>
                </tr>
            </table>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe3" open="false" style=" display: none;   cursor: hand; ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe3" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD1200
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe4" open="false" style=" display: none;   cursor: hand; ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe5" open="false" style=" display: none;   cursor: hand; ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe5" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD1300
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe6" open="false" style=" display: none;   cursor: hand; ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe7" open="false" style=" display: none;   cursor: hand; ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe7" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD1400
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe8" open="false" style=" display: none;   cursor: hand; ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe9" open="false" style=" display: none;   cursor: hand; ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe9" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD1600
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe10" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe11" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe11" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD1700
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                            PASS
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe12" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                                PASS
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe13" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe13" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD1800
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                            PASS
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe14" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                                PASS
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe15" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe15" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD3000
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe16" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe17" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe17" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD3200
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe18" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/T.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                                NO TEST
                            </td>
                        </tr>
                    </table>
                </div>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe19" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/T.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1:RE
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe20" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                [rollup]
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe21" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe21" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD3500
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe22" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/T.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                                NO TEST
                            </td>
                        </tr>
                    </table>
                </div>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe23" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/T.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1:RE
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe24" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                [rollup]
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe25" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe25" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD3700
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe26" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/T.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                                NO TEST
                            </td>
                        </tr>
                    </table>
                </div>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe27" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/T.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1:2 Instr
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe28" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                [rollup]
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe29" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe29" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CD4000
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe30" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/T.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                                NO TEST
                            </td>
                        </tr>
                    </table>
                </div>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe31" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/T.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1:2 Instr
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe32" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                [rollup]
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe33" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe33" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CDEmerald
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe34" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe35" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Tplus.png"
                                _open="images/Tminus.png" _closed="images/Tplus.png" id="                stateImagefe35" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CDRuby
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                            PASS
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe36" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/I.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                                PASS
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe37" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Lplus.png"
                                _open="images/Lminus.png" _closed="images/Lplus.png" id="                stateImagefe37" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            CDSapphire
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe38" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/blank.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
            ondragstart="return false" image="images/book.gif" imageopen="images/bookOpen.gif"
            id="fe39" open="false" style=" display: none;   cursor: hand;
            ">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                        <img src="images/blank.png" /><img src="images/Tplus.png" _open="images/Tminus.png"
                            _closed="images/Tplus.png" id="                stateImagefe39" />
                    </td>
                    <td valign="middle">
                        <img border="0" id="image" src="images/book.gif" />
                    </td>
                    <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                        onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                        padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                        ">
                        Subtest 2
                    </td>
                    <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                         font-size: 11px;  font-color: black; ">
                    </td>
                </tr>
            </table>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe40" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/I.png" /><img src="images/Lplus.png"
                                _open="images/Lminus.png" _closed="images/Lplus.png" id="                stateImagefe40" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            Setup 1
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe41" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/I.png" /><img src="images/blank.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
            ondragstart="return false" image="images/book.gif" imageopen="images/bookOpen.gif"
            id="fe42" open="false" style=" display: none;   cursor: hand;
            ">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                        <img src="images/blank.png" /><img src="images/Lplus.png" _open="images/Lminus.png"
                            _closed="images/Lplus.png" id="                stateImagefe42" />
                    </td>
                    <td valign="middle">
                        <img border="0" id="image" src="images/book.gif" />
                    </td>
                    <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                        onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                        padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                        ">
                        Subtest 3
                    </td>
                    <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                         font-size: 11px;  font-color: black; ">
                    </td>
                </tr>
            </table>
            <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                ondragstart="return false" image="images/closedfolder.png" imageopen="images/openfolder.png"
                id="fe43" open="false" style=" display: none;   cursor: hand;
                ">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <img src="images/blank.png" /><img src="images/blank.png" /><img src="images/Lplus.png"
                                _open="images/Lminus.png" _closed="images/Lplus.png" id="                stateImagefe43" />
                        </td>
                        <td valign="middle">
                            <img border="0" id="image" src="images/closedfolder.png" />
                        </td>
                        <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                            onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                            padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                            ">
                            Setup 1
                        </td>
                        <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                             font-size: 11px;  font-color: black; ">
                        </td>
                    </tr>
                </table>
                <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false"
                    ondragstart="return false" image="images/document.gif" imageopen="images/document.gif"
                    id="fe44" open="false" style=" display: none;   cursor: hand;
                    ">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="images/blank.png" /><img src="images/blank.png" /><img src="images/blank.png" /><img
                                    src="images/L.png" />
                            </td>
                            <td valign="middle">
                                <img border="0" id="image" src="images/document.gif" />
                            </td>
                            <td width="100%" valign="middle" nowrap="true" onmouseover="this.style.color = 'red'; this.style.fontWeight = 'bold';"
                                onmouseout="this.style.color = 'black'; this.style.fontWeight = 'normal';" style="
                                padding-left: 7px;  font-family: Verdana;  font-size: 11px;  font-color: black;
                                ">
                                Unit 1
                            </td>
                            <td width="75px" nowrap="true" style=" padding-left: 7px;  font-family: Verdana;
                                 font-size: 11px;  font-color: black; ">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
                </div>
            </td>
            <td width="100%">
<!-- Content on Right side -->
            </td>
        </tr>
    </table>
</body>
</html>

Open in new window

images.zip
Web Languages and StandardsHTMLJavaScript

Avatar of undefined
Last Comment
BeckyBair

8/22/2022 - Mon
SOLUTION
Zvonko

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Zvonko

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
BeckyBair

Thank you Zvonko, both the removing of newline & spaces and the imageopen vs imageOpen help me perfectly for the image and spacing issue I have.

I am keeping this open to see if someone can help with the checkboxes that I need to add just between the book/folder images, and the +/- images.
Zvonko

From my point of view make to me the checkboxes at that location no obvious selection. What should be selected by checkbox in front of a book? All subfolders? All documents in subfolders?

I would prefer placing the checkboxes as last cell for the tr's with the documents are to select documents one by one.
ASKER
BeckyBair

Clicking on checkbox will check all children of that checkbox, example:  check the checkbox in front of a subfolder will check all documents below it including the subfolder and then vice versa when unchecking.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
BeckyBair

Thank you!!!  This is perfect!!