can anyone help me display a tree menu just like the
attached image here, since the table here is
dynamically created using telscript.js which is also
attached here
HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
<META http-equiv="Content-Style-Type"
content="text/css">
<TITLE>Information server +Plus</TITLE>
<LINK rel="stylesheet" href="cmnCss.css"
type="text/css">
<LINK rel="stylesheet" href="Style21.css"
type="text/css">
<LINK rel="stylesheet" href="scroll.css"
type="text/css">
<LINK rel="stylesheet" href="dtree.css"
type="text/css">
<SCRIPT language="JavaScript" src="dtree.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="opt3Msg.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="addrOpen.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="dlg3pane.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="bookScrpttree.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="Script1.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="scrollObj.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="hoverscroll.js"></SCRIPT>
<SCRIPT language="JavaScript" src="event.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="slidebar.js"></SCRIPT>
<SCRIPT language="JavaScript"
src="scroll_aux.js"></SCRIPT>
<SCRIPT language="JavaScript">
<!--
var BOOKFUNCTION = OPTION_TEL_FUNCTION_MIDX;
var CurrentTab = 13; // %CurrentTab%(tab-256)
var FNo = 4; // %FilterNumber%
var NFlg = 1; // %Nameflg%
var SPLENGTH = 0; //%SPLENGTH%
var PTLENGTH = 0; //%PTLENGTH%
var PGLENGTH = 0; //%PGLENGTH%
var SLENGTH = 0; //%SLENGTH%
var SGLENGTH = 0; //%SGLENGTH%
var SPMAX = 500; //%SPMAX%
var TMAX = 2000; //%TMAX%
var GMAX = 200; //%GMAX%
var TTLENGTH = 0; //%TTLENGTH%
var TGLENGTH = 0; //%TGLENGTH%
var TelHANDLE = "0"; // userHandle or spd handle
var SUBMIT=false;
//%ADDRESSLIST%
//TelObj.push( new
dbBookItem('101','あさがお1','075-344-1234',''));
//TelObj.push( new
dbBookItem('102','あさひ2','075-344-1235',''));
CurrentTab=12;
FNo=2;
NFlg=1;
SPLENGTH=3;
PTLENGTH=0;
PGLENGTH=0;
SLENGTH=10;
SGLENGTH=0;
SPMAX=500;
TMAX=5000;
GMAX=500;
TTLENGTH=10;
TGLENGTH=0;
TelHANDLE="0";
SUBMIT=true;
BookObj[0]=new
dbBookItem("2","govs","test","sect","333333","[EMAIL PROTECTED]");
BookObj[1]=new
dbBookItem("3","jeff","adtx","sect","777777","email");
BookObj[2]=new
dbBookItem("4","test","test","test","1233333","mail");
BookObj[3]=new
dbBookItem("5","ryan","adtx","section","12356","email");
//------------------------------------------
// Initialize Dialog
//------------------------------------------
if ((CurrentTab < 0) || (CurrentTab > 3)) CurrentTab =
1;
if ((FNo < OPTION_BOOK_MFP) || (FNo >
OPTION_BOOK_COMMON_GROUP)) FNo = OPTION_BOOK_PRIVATE;
if ((NFlg < 0) || (NFlg > 1)) NFlg = 1;
function InitDlg() {
InitDlgCommon(FNo);
document.getElementById("TELUSERHANDLE").value =
TelHANDLE;
document.getElementById("FNO").value = FNo;
document.getElementById("TAB").value = CurrentTab;
document.getElementById("NFLG").value = NFlg;
setResize(1100,800);
var wndo = new dw_scrollObj('wn', 'lyr1');
wndo.setUpScrollbar("dragBar", "track", "v", 1, 1);
dw_scrollObj.rePositionGecko();
wndo.shiftTo( document.getElementById(wndo.lyrId),
0, 0);
}
//------------------------------------------
// submit_optionTelGroup
//------------------------------------------
function submit_optionTelGroup(Obj,childWindow) {
var PObj = document.createElement("FORM");
PObj.name = "optionTelGroupForm";
PObj.action = OPT_FORM_ACTION_SETTING;
PObj.target = "_self";
PObj.encoding= OPT_FORM_ENCODING_URLENCODING;
PObj.method = OPT_FORM_METHOD_POST;
var Hidden;
var str;
for (i=0;i<Obj.length;i++) {
if ((Obj[i].type=="hidden")||(Obj[i].type=="text"))
{
Hidden = document.createElement("INPUT");
Hidden.type = "hidden";
Hidden.name = Obj[i].name;
if ((Obj[i].name).toLowerCase() == "sendaddress") {
str = (Obj[i].value).split(",");
if (str.length > 3) {
Obj[i].value =
str[0]+","+str[1]+","+((str[3].toLowerCase() == "to")?
1:(str[3].toLowerCase() == "cc")?
2:(str[3].toLowerCase() == "bcc")? 3: 0);
}
else { Obj[i].value = str[0]+","+str[1]+",0"; }
}
Hidden.value = Obj[i].value;
PObj.appendChild(Hidden);
}
}
Hidden = document.createElement("INPUT");
Hidden.type = "hidden";
Hidden.name = "actionFlg";
Hidden.value = 4;
PObj.appendChild(Hidden);
document.getElementsByTagName("BODY")[0].appendChild(PObj);
childWindow.close();
PObj.submit();
}
// -->
</SCRIPT>
<script Language="JavaScript"><!--
function exMenu(tName)
{
tMenu = document.all[tName].style;
if (tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
// --></script>
</HEAD>
<BODY class="Body" onload="InitDlg();">
<TABLE border=1 bordercolor="green" bgcolor="sadf">
<TR>
<TD>
<a href="javaScript:exMenu('tblTB_1')"><img
src="../img/plusbottom1.gif"></a>Tree Menu1<br>
<TBODY ID="tblTB_1" style="display:none">
<!--<div id="treeMenu1" style="display:none">-->
<TR><TD><img src="../img/join.gif"><a
href="#">Yahoo!</a></TD></TR><br>
<TR><TD><img src="../img/join.gif"><a href="#"
>Goo</a></TD></TR><br>
<TR><TD><img src="../img/join.gif"><a
href="#">Lycos</a></TD></TR><br>
<TR><TD><a href="javaScript:exMenu('tblTB_2')"><img
src="../img/join.gif"><img
src="../img/minusbottom1.gif"></a>Sub tree of menu
1<br>
<TBODY ID="tblTB_2" style="display:none">
<!-- <div id="treeMenu2" style="display:none">-->
<TR><TD><img src="../img/line.gif"> <img
src="../img/join.gif"><a href="#"
id="level2a">Infoseek</a></TD></TR><br>
<TR><TD> <img
src="../img/join.gif"><a href="#" id="level2b"
>Google</a></TD></TR><br>
<TR><TD> <img
src="../img/joinbottom.gif"><a href="#"
id="level2c">Kids Goo</a></TD></TR><br>
<!--</div>-->
<!--</div>-->
</TBODY>
</TBODY>
</TD>
</TR>
</TABLE>
<FORM name="docList" onsubmit="return false;">
<SELECT name="TreeDisplay" onchange="changeDisplay()"
size="1">
<OPTION>番号/名前/会社名/部ņ\
26;名
</OPTION>
<OPTION>会社名/部署名/名前</OPTI\
ON>
</SELECT>
<TABLE border="0" class="TEdg" cellspacing="0"
cellpadding="0" bordercolor="gray">
<TBODY>
<TR>
<TD class="Corner"><IMG src="../../D59.jpg"
width="12" height="11" border="0"></TD>
<TD class="EdgeTop"><IMG src="../../D54.jpg"
width="64" height="11" border="0"></TD>
<TD class="Corner"><IMG src="../../D56.jpg"
width="12" height="11" border="0"></TD>
</TR>
</TBODY>
</TABLE>
<a
href="javaScript:exMenu('treeMenu1')">+</a>Tree
Menu1<br>
<div id="treeMenu1" style="display:none">
├<span id="m1"></span><br>
├<span id="m2"></span><br>
├<span id="m3"></span><br>
└<a
href="javaScript:exMenu('treeMenu2')">+</a>Sub
tree of menu 1<br>
<div id="treeMenu2" style="display:none">
  ├<a
href="http://www.infoseek.co.jp/">Infoseek</a><br>
  ├<a
href="http://www.google.com/" >Google</a><br>
  └<a
href="http://kids.goo.ne.jp/">Kids Goo</a><br>
</div>
</div>
<TABLE border="0" class="TBtn" cellspacing="0"
cellpadding="0" bordercolor="blue">
<TBODY>
<TR>
<TD class="EdgeLeft"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
<TD
class="Title">宛先表設定</TD>
<TD class="BtnCell"><INPUT type="reset"
class="ExecBtn" name="cancel"
value="閉じる"
onclick="window.close();"></TD>
<TD class="EdgeRight"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="0" class="TItm" cellspacing="0"
cellpadding="0" bordercolor="orange">
<TBODY>
<TR>
<TD class="EdgeLeft"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
<TD class="TopLine"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
<TD class="EdgeRight"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
</TR>
<TR>
<TD class="EdgeLeft"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
<TD class="TIL"><IMG src="../../M62.png"
width="10" height="10" border="0"></TD>
<TD class="EdgeRight"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
</TR>
<TR>
<TD class="EdgeLeft"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
<TD>
<CENTER>
<TABLE width="98%" border="0" cellspacing="0"
cellpadding="0" id="TABTABLE" bgcolor="#d9d9d9"
bordercolor="green">
<TBODY>
<TR>
<!--<TD><IMG src="../../M62.png" width="5"
height="5" border="0"></TD>-->
<TD><A
href="optBook.htm?tab=12&FNo=0&NFlg=0"><IMG
src="Q12.jpg" height="21" width="120" border="0"
alt="本体宛先表"
id="M1"></A></TD>
<TD><A
href="optBook.htm?tab=12&FNo=2&NFlg=1"><IMG
src="Q13.jpg" height="21" width="120" border="0"
alt="Is+Plus宛先表"
id="M2"></A></TD>
<TD><A
href="optBook.htm?tab=12&FNo=3&NFlg=1"><IMG
src="Q14.jpg" height="21" width="120" border="0"
alt="Is+Plusグループ"
id="M3"></A></TD>
<TD></TD>
</TR>
<TR>
<!--<TD class="TlL1"><IMG
src="../../M62.png" height="1" border="0"></TD>-->
<TD><IMG src="../../D23.jpg" width="120"
height="1" border="0" id="ML1"></TD>
<TD><IMG src="../../D24.jpg" width="120"
height="1" border="0" id="ML2"></TD>
<TD><IMG src="../../D24.jpg" width="120"
height="1" border="0" id="ML3"></TD>
<TD class="TlL2"><IMG src="../../M62.png"
width="1" height="1" border="0"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<CENTER>
<TABLE border="0" cellspacing="0"
cellpadding="5" width="98%" bgcolor="#f7f7f7"
bordercolor="green">
<TBODY>
<TR>
<TD width="10%" align="center"
valign="bottom" colspan="2" class="left">
<TABLE border="0" cellspacing="0"
cellpadding="0" id="UPPERBTNAREA">
<TBODY>
<TR>
<TD><IMG src="../../M62.png"
width="50 " height="10" border="0"></TD>
</TR>
<TR>
<TD><IMG src="../../M62.png"
width="50 " height="5" border="0"></TD>
<TD id="BTNAREA1"></TD>
<TD><IMG src="../../M62.png"
width="50 " height="5" border="0"></TD>
<TD id="BTNAREA2"></TD>
<TD id="BTNAREA3"></TD>
<TD id="BTNAREA4"></TD>
<TD id="BTNAREA5"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<CENTER>
<TABLE border="1" cellspacing="0"
cellpadding="0" width="98%" id="MENUTABLE"
bgcolor=#0a74dd bordercolor="red">
<TBODY>
<TR>
<TD width="5%" class="ItemNoLine
center"><IMG src="../../M62.png" height="5"
border="0"></TD>
<TD width="50%" class="ItemNoLineL"
id="SPN1"> <IMG src="../../M62.png" width="5"
height="5" border="0"></TD>
<TD width="16%" class="ItemNoLineL"
id="SPN2"> <IMG src="../../M62.png" width="5"
height="5" border="0"></TD>
<TD width="12%" class="ItemNoLineL"
id="SPN3"> <IMG src="../../M62.png" width="5"
height="5" border="0"></TD>
<!-- <TD width="20%"
class="pageTitle_rye" ><INPUT type="text"
name="startnum" size="4" id="UpperLINEBAR"
onchange="changePaneLine(1);"></input> から
<INPUT type="button" name="display"
size="12" value="表示"></input></TD>
-->
<TD width="20%" class="pageTitle_rye" ><INPUT
type="text" name="startnum" size="4"
id="UpperLINEBAR"></input> から
<INPUT type="button" name="display"
size="12" value="表示" onClick="sinput()"
id="UpperDOCALL"></input></TD>
</TR>
<TR>
<TD colspan="5" bgcolor="white"><IMG
src="../../D24.jpg" width="1" height="1"
border="0"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<CENTER>
<TABLE border="0" cellspacing="0"
cellpadding="0" width="98%" id="UPPERBTNAREA"
bordercolor="fuchsia">
<TBODY>
<TR>
<TD width="5%" class="ItemNoLine
center"><INPUT type="checkbox" name="docall"
id="UpperDOCALL" class="DlgCtl0"
onclick="all_line(this.checked,'telID',this.form);"></TD>
<TD width="13%" class="ItemNoLineL"
id="SPNO"> <IMG src="../../M62.png" width="5"
height="5" border="0"></TD>
<TD width="32%" class="ItemNoLineL"
id="FilterConpany"></TD>
<TD width="15%" class="ItemNoLineL"
id="FilterAddress"></TD>
<TD width="27%" class="ItemNoLineL"
id="FilterAddress"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<CENTER>
<TABLE cellspacing="0" cellpadding="0" border="0"
width="99%" id="UPPERBTNAREA" >
<TR>
<TD>
<DIV id="hold">
<DIV id="wn">
<DIV id="lyr1" class="content">
<CENTER>
<TABLE border="0" cellspacing="0" cellpadding="0"
align="center" width="99%" id="UpperDOCLIST_TABLE"
bordercolor="fuchsia">
<TBODY>
<TR>
<TD width="6%" class="ItemNoLine center"></TD>
<TD width="8%" class="ItemNoLineL"></TD>
<TD width="41%" class="ItemNoLineL"></TD>
<TD width="15%" class="ItemNoLineL"></TD>
<TD width="24%" class="ItemNoLineL"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</DIV>
</DIV>
</DIV>
</TD>
<TD width="2%" border="1" cellpadding="0"
cellspacing="0" bordercolor="magenta">
<TABLE class="scrollLinks" >
<DIV id="scrollbar" >
<DIV id="up"><a href="javascript:;"
onclick="return false"
onmouseover="dw_scrollObj.initScroll('wn','up')"
onmouseout="dw_scrollObj.stopScroll('wn')"
onmousedown="dw_scrollObj.doubleSpeed('wn')"
onmouseup="dw_scrollObj.resetSpeed('wn')"><img
src="R50.jpg" alt="" /></a></DIV>
<DIV id="track">
<DIV id="dragBar"></DIV>
</DIV>
<DIV id="down"><a href="javascript:;"
onclick="return false"
onmouseover="dw_scrollObj.initScroll('wn','down')"
onmouseout="dw_scrollObj.stopScroll('wn')"
onmousedown="dw_scrollObj.doubleSpeed('wn')"
onmouseup="dw_scrollObj.resetSpeed('wn')"><img
src="R51.jpg" alt="" /></a></DIV>
</DIV></TD>
</TR>
</TABLE>
</TD>
</TR>
</TR>
</TABLE>
</CENTER>
<CENTER>
<TABLE border="0" cellspacing="0"
cellpadding="5" width="98%" bordercolor="green">
<TBODY>
<TR>
<TD width="10%" align="center"
valign="top" colspan="2" class="left">
<TABLE border="0" cellspacing="0"
cellpadding="0" id="LOWERBTNAREA" bordercolor="red">
<TBODY>
<TR>
<TD><IMG src="../../M62.png"
width="50 " height="5" border="0"></TD>
<TD id="BTNAREA_1"></TD>
<TD><IMG src="../../M62.png"
width="50" height="5" border="0"></TD>
<TD id="BTNAREA_2"></TD>
<TD id="BTNAREA_3"></TD>
<TD id="BTNAREA_4"></TD>
<TD id="BTNAREA_5"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</TD>
<TD class="EdgeRight"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
</TR>
<TR>
<TD class="EdgeLeft"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
<TD class="BottomLine"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
<!--<TD class="BottomLine"><IMG
src="../../M62.png" width="5" height="5"
border="0"></TD>-->
<TD class="EdgeRight"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="0" class="TBtn" cellspacing="0"
cellpadding="0" bordercolor="blue">
<TBODY>
<TR>
<TD class="EdgeLeft"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
<TD class="BtnCell"><INPUT type="reset"
class="ExecBtn" name="cancel"
value="閉じる"
onclick="window.close();"></TD>
<TD class="EdgeRight"><IMG src="../../M62.png"
width="5" height="5" border="0"></TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="0" class="TEdg" cellspacing="0"
cellpadding="0" bordercolor="gray">
<TBODY>
<TR>
<TD class="Corner"><IMG src="../../D61.jpg"
width="12" height="11" border="0"></TD>
<TD class="EdgeBottom"><IMG src="../../D55.jpg"
width="64" height="11" border="0"></TD>
<TD class="Corner"><IMG src="../../D58.jpg"
width="12" height="11" border="0"></TD>
</TR>
</TBODY>
</TABLE>
<input type="hidden" name="teluserhandle" value=""
id="TELUSERHANDLE">
<input type="hidden" name="FNo" value="" id="FNO">
<input type="hidden" name="tab" value="" id="TAB">
<input type="hidden" name="NFlg" value="" id="NFLG">
<input type="hidden" name="actionFlg" value=""
id="ACTIONFLG">
</FORM>
</BODY>
</HTML>
JS file that creates the ELements of the TABLE
//------------------------------------------
//
//------------------------------------------
function createDocListElement(P)
{
function docListCheckbox(tr,row,col,telID,docIndex)
{
var td = tr.insertCell(col);
td.className = LineClass[P][(row%2)][col];
td.id = P+"TR_"+row+"_"+col;
var elm = document.createElement("INPUT");
elm.type = "Checkbox";
elm.checked = false;
elm.id = P+"telID_" + row;
elm.line = row;
elm.pane = P;
elm.docIndex = docIndex;
elm.name = (BOOKFUNCTION==OPTION_TEL_FUNCTION_MIDX)?
"telID" : P+"telID";
elm.value = telID;
elm.className = 'DlgCtl0';
elm.onclick = (new checkboxClick()).click;
td.appendChild(elm);
}
createDocListElement.prototype.checkbox =
docListCheckbox;
function
addressListLink(tr,row,col,telID,flag,str,type)
{
var td = tr.insertCell(col);
td.className = LineClass[P][(row%2)][col];
td.id = P+"TR_"+row+"_"+col;
if (str!="") {
if (BOOKFUNCTION==OPTION_TEL_FUNCTION_MIDX) {
var href =
((FNo==OPTION_BOOK_PRIVATE_GROUP)||(FNo==OPTION_BOOK_COMMON_GROUP))?
"javascript:WinOpen('"+setAction(FNo,telID)+"','_subdialog');"
: setAction(FNo,telID);
var elm = createAnchor("A_"+row, href,"_self"
,"listLink");
elm.box = P+"telID_" + row;
elm.line = row;
elm.pane = P;
elm.onclick = (new addressLinkEvent()).click;
var S = ((P=="Lower")&&(type==OPTION_ADD_TYPE_G))?
OPTION_TYPE_LABEL_GROUP: "";
elm.appendChild(document.createTextNode(S+str));
} else {
var S = ((P=="Lower")&&(type==OPTION_ADD_TYPE_G))?
OPTION_TYPE_LABEL_GROUP: "";
var elm = document.createTextNode(S+str);
}
} else {
elm = document.createElement("BR");
}
td.appendChild(elm);
}
createDocListElement.prototype.addresslink =
addressListLink;
function docListAddress(tr,row,col,xO,flg)
{
var td = tr.insertCell(col);
td.className = LineClass[P][(row%2)][col];
td.id = P+"TR_"+row+"_"+col;
if (xO[flg]!="") {
if (P=="Upper") {
if ((flg==OPTION_TEL_FE)
&&(BOOKFUNCTION!=OPTION_TEL_FUNCTION_MIDX)) {
createTOCCBCC(row,td);
}
td.appendChild(document.createTextNode(xO[flg]));
}
else if (P==PaneName[PLower]) {
if (xO.ToCcBcc != "") {
td.appendChild(document.createTextNode(xO.ToCcBcc+":"));
}
td.appendChild(document.createTextNode(xO.Address));
}
}
else {
td.appendChild(document.createElement("BR"));
}
}
createDocListElement.prototype.addresstext =
docListAddress;
function docListBlank(tr,row,col)
{
var td = tr.insertCell(col);
td.className = LineClass[P][(row%2)][col];
td.id = P+"TR_"+row+"_"+col;
td.appendChild(document.createElement("BR"));
}
createDocListElement.prototype.blank = docListBlank;
}
anyone can help me?
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/AspClassicAnyQuestionIsOk/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/