请教用javascript实现一颗树.......

http://fason.nease.net/zhuanti/tree/dtree/dtree.htm

treeview:
http://fason.nease.net/zhuanti/tree/treeview/treeview.htm

<HTML>
<HEAD>
<TITLE>MSDN Online Samples:  Outline</TITLE>
<META NAME="FILENAME" CONTENT="outline_VBS.HTM"><STYLE>
  A:link { color:#003399; text-decoration:none; }
  A:visited { color:#6699CC; text-decoration:none; }
  A:hover { text-decoration:underline; }
</STYLE></HEAD>
<BODY TOPMARGIN=20 LEFTMARGIN=40 BGCOLOR="#FFFFFF" LINK="#000066" VLINK="#666666" TEXT="#000000">



<H2>Outline</H2><FONT FACE="verdana,arial,helvetica" SIZE=1>
<A HREF="#" ONCLICK="self.close()"><IMG ALIGN="middle" SRC="demo.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Click to Close Sample"></A>
 <A HREF="#" ONCLICK="self.close()">Close This Sample</A>
</FONT>
<HR><P>
<P><FONT FACE="Verdana, Arial, Helvetica" SIZE="4"><B>Use the mouse to expand the outline!</B></FONT>
<BR><BR><DIV ID="Out0">
  <IMG SRC="images/folder.gif" ID="Out1" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Item 1<BR>
  <DIV ID="Out1d" STYLE="display:None">
      <IMG SRC="images/folder.gif" ID="Out2" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Item 1.1<BR>
    <DIV ID="Out2d" STYLE="display:None">
           <IMG SRC="images/60-60-60.gif" WIDTH="20" HEIGHT="15"> Item 1.1.1<BR>
           <IMG SRC="images/60-60-60.gif" WIDTH="20" HEIGHT="15"> Item 1.1.2<BR>
    </DIV>
      <IMG SRC="images/60-60-60.gif" WIDTH="20" HEIGHT="15"> Item 1.2<BR>
  </DIV>
  <IMG SRC="images/60-60-60.gif" WIDTH="20" HEIGHT="15"> Item 2<BR>
</DIV><SCRIPT LANGUAGE="VBScript">
sub document_onClick
  dim targetId, srcElement, targetElement
  set srcElement = window.event.srcElement
  if (srcElement.className = "Outline") then
     targetId = srcElement.id & "d"
     set targetElement = document.all(targetId)
     if (targetElement.style.display = "none") then
        targetElement.style.display = ""
        srcElement.src = "images/ofolder.gif"
     else
        targetElement.style.display = "none"
        srcElement.src = "images/folder.gif"
     end if
  end if
end sub</SCRIPT><HR><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
  <TR>
    <TD ALIGN="LEFT" VALIGN="TOP" COLSPAN="2"><FONT FACE="Verdana, Arial, Helvetica" SIZE="2"><B>Description</B></FONT></TD>
  </TR>
  <TR>
    <TD ALIGN="LEFT" VALIGN="TOP" COLSPAN="2"><FONT FACE="Verdana, Arial, Helvetica" SIZE="2">This example shows how to build an interactive outline that expands and collapses. Click closed folders to open them, and click open folders to close them. The items automatically expand and collapse.</FONT>
      <P>
      <FONT FACE="Verdana, Arial, Helvetica" SIZE="2">
        No matter how many items you would like to include in your outline, or what those items contain, the code to collapse and expand items does not need to change. A simple naming convention allows this consistency. In the example above, all of the images that are used to control the collapsing and expanding of elements are given the class "Outline." The element that will be hidden or shown when its associated image is clicked has a name consisting of the ID of its associated images, followed by a "d." For example, if the Image ID is "image 1," the outline element will have an ID of "image1d." When a click occurs, the code checks to see if the source of the click is an object whose class equals "Outline." If so, the code gets the element that has an ID equal to the ID of the clicked image plus "d." That element's display status is then toggled.
      </FONT>
    </TD>
  </TR>
  <TR>
    <TD ALIGN="LEFT" VALIGN="TOP" COLSPAN="2"><P><FONT FACE="Verdana, Arial, Helvetica" SIZE="2"><BR><B>Usage</B></FONT></TD>
  </TR>
  <TR>
    <TD ALIGN="LEFT" VALIGN="TOP" COLSPAN="2"><FONT FACE="Verdana, Arial, Helvetica" SIZE="2">As explained, the code to control the outline need not change based on the contents of the outline. Simply take the script from this page and use the naming convention described previously—you will have instant outlines.</FONT></TD>
  </TR>
</TABLE>
<P>
<P>
<P>
<P>
<FONT FACE="MS SANS SERIF" SIZE="1" COLOR="BLACK">
© <A HREF="http://msdn.microsoft.com/isapi/gomscom.asp?TARGET=/misc/cpyright.htm" TARGET="_top">2000 Microsoft Corporation. All rights reserved. Terms of use</A>.
</FONT></BODY>
</HTML>

http://www.blueidea.com/articleimg/2003/09/804/index.htm

调试易

请教用javascript实现一颗树.......

解决方案 »