javascript实现tree视图(一).简单静态树

最新推荐文章于 2024-02-28 17:57:02 发布
最新推荐文章于 2024-02-28 17:57:02 发布
阅读量3.2k 收藏
点赞数
文章标签： javascript tree border table html plot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenxiaohua/article/details/2155147
版权
  1. 开始 
    经常看见一些javascript实现的treeview,很多人都觉得比较复杂,后面我将用javascript通过一些例子,从简到繁,从易到难,带大家实现一个完整,有应用价值的treeview.
  2. 我们开始吧
    下面是一个简单的例子:
    <html>
    <head>
     <title>tree view test</title>
     <meta http-equiv="Content-Type" content="text/html; charset=GBK">
     <meta name="KEYWORDS" content="html,xml,javascript"/>
    </head>
    <style>
     body {font-size:12px}
     .{font-family:arial;font-size:12px}
     h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
     xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
     .hdr{
      background-color:lightgrey;
      margin-bottom:10px;
      padding-left:10px;
     }
    </style>
    <script>
    var imgpath = "../imgs/";
    function PopItem(itemid,mark)
    {
     if(document.all[itemid].style.display=='none')
     {
      document.all[itemid].style.display="block";
      
      //变+号为-号
      if(document.all[mark].innerHTML=='+')
       document.all[mark].innerHTML='-';
      
      //document.all[itemid].style.display="yes";
     }
     else
     {
      document.all[itemid].style.display="none";
      
      //变-号为+号
      if(document.all[mark].innerHTML=='-')
       document.all[mark].innerHTML='+';
     }
    }
    <!--οncοntextmenu="return false"-->
    </script>
    <body >
     <div>放飞梦想 JavaScript Tree sample 1</div>
     <p>
      <h4>在html页面上显示树视图,其实就识用一些div原始,进行层叠,隐藏或者显示下一层div</h4>
      <h4>1.用table按照树形排列</h4>
      <h4>2.在每一层添加隐藏和显示脚本</h4>
      <h4>3.总之,动态的树也是通过在服务器端生成这样的树状结构的数据,显示在页面上.</h4>
     </p>
    <div id="treeview" style="width:250; height:300;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;">
     <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0  >
     <tbody>
      <tr height="18" onClick="return PopItem('item02','mark1')" style="FONT-SIZE: 10pt; CURSOR: hand">
       <td id="mark1" width="18">+</td>
        <td style="DISPLAY:none"><input type="checkbox"/></td>
       <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Books</td>
      </tr>
     </tbody>
     <tbody id="item02" Style="display:none">
      <tr Style="display:block">
       <td > </td>
       <td colSpan=2>
        <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
         <tbody>
          <tr height="18" onClick="return PopItem('item03','mark2')" >
           <td id="mark2">+</td>
            <td style="DISPLAY:none"><input type="checkbox"/></td>
            <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Mystery & Thrillers</td>
          </tr>
         </tbody>
         <tbody id="item03" Style="display:none">
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr height="18" onClick="return PopItem('item04','mark3')">
              <td width="18" id="mark3">+</td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Lawrence Block</td>
             </tr>
            </tbody>
            <tbody id="item04" Style="display:none">
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                 <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>All the Flowers Are Dying</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                 <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Burglar on the Prowl</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                 <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Plot Thickens</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                 <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Grifter's Game</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                 <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Burglar Who Thought He Was Bogart</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
            </tbody>
           </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr height="18" onClick="return PopItem('item05','mark4')">
              <td id="mark4">+</td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Robert Crais</td>
             </tr>
            </tbody>
            <tbody id="item05" Style="display:none">
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
                <tbody>
                 <tr>
                  <td width="18"></td>
                  <td style="DISPLAY:none"><input type="checkbox"/></td>
                   <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Forgotten Man</td>
                 </tr>
                </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
                <tbody>
                 <tr>
                  <td width="18"></td>
                  <td style="DISPLAY:none"><input type="checkbox"/></td>
                   <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Stalking the Angel</td>
                 </tr>
                </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
                <tbody>
                 <tr>
                  <td width="18"></td>
                  <td style="DISPLAY:none"><input type="checkbox"/></td>
                   <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Free Fall</td>
                 </tr>
                </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
                <tbody>
                 <tr>
                  <td width="18"></td>
                  <td style="DISPLAY:none"><input type="checkbox"/></td>
                   <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Sunset Express</td>
                 </tr>
                </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
                <tbody>
                 <tr>
                  <td width="18"></td>
                  <td style="DISPLAY:none"><input type="checkbox"/></td>
                   <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Hostage</td>
                 </tr>
                </tbody>
               </table>
              </td>
             </tr>
            </tbody>
           </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Ian Rankin</td>
             </tr>
            </tbody>
           </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>James Patterson</td>
             </tr>
            </tbody>
           </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Nancy Atherton</td>
             </tr>
            </tbody>
           </table>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
      <tr Style="display:block">
       <td width="18"></td>
       <td colSpan=2>
        <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
         <tbody>
          <tr height="18" onClick="return PopItem('item06','mark5')">
           <td id="mark5">+</td>
           <td style="DISPLAY:none"><input type="checkbox"/></td>
            <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>History</td>
          </tr>
         </tbody>
         <tbody id="item06" Style="display:none">
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>John Mack Faragher</td>
             </tr>
            </tbody>
           </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Jim Dwyer</td>
             </tr>
            </tbody>
           </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Larry Schweikart</td>
             </tr>
            </tbody>
           </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>R. Lee Ermey</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
      <tr Style="display:block">
       <td > </td>
       <td colSpan=2>
        <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
         <tbody>
          <tr height="18" onClick="return PopItem('item07','mark6')">
           <td id="mark6">+</td>
           <td style="DISPLAY:none"><input type="checkbox"/></td>
            <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Horror</td>
          </tr>
         </tbody>
         <tbody id="item07" Style="display:none">
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Stephen King</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr height="18" onClick="return PopItem('item08','mark7')">
              <td id="mark7">+</td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Dan Brown</td>
             </tr>
            </tbody>
            <tbody id="item08" Style="display:none">
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Angels & Demons</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Deception Point</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Digital Fortress</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Da Vinci Code</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Deception Point</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
            </tobdy>
            </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Mary Janice Davidson</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Katie Macalister</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
      <tr >
       <td > </td>
       <td colSpan=2>
        <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
         <tbody>
          <tr height="18" onClick="return PopItem('item09','mark8')">
           <td id="mark8">+</td>
           <td style="DISPLAY:none"><input type="checkbox"/></td>
            <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Science Fiction & Fantasy</td>
          </tr>
         </tbody>
         <tbody id="item09" Style="display:none">
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Audrey Niffenegger</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Philip Roth</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
      <tr Style="display:block">
       <td > </td>
       <td colSpan=2>
        <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
         <tbody>
          <tr height="18" onClick="return PopItem('item10','mark9')">
           <td id="mark9">+</td>
           <td style="DISPLAY:none"><input type="checkbox"/></td>
            <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Sport</td>
          </tr>
         </tbody>
         <tbody id="item10" Style="display:none">
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Bill Reynolds</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
      <tr Style="display:block">
       <td > </td>
       <td colSpan=2>
        <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
         <tbody>
          <tr height="18" onClick="return PopItem('item11','mark10')">
           <td id="mark10">+</td>
           <td style="DISPLAY:none"><input type="checkbox"/></td>
            <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Teens</td>
          </tr>
         </tbody>
         <tbody id="item11" Style="display:none">
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr height="18" onClick="return PopItem('item12','mark11')">
              <td id="mark11">+</td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Joss Whedon</td>
             </tr>
            </tbody>
            <tbody id="item12" Style="display:none">
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Astonishing X-Men</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Joss Whedon: The Genius Behind Buffy</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Fray</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Tales Of The Vampires</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
             <tr>
              <td width="18"></td>
              <td colSpan=2>
               <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
               <tbody>
                <tr>
                 <td width="18"></td>
                 <td style="DISPLAY:none"><input type="checkbox"/></td>
                  <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>The Harvest</td>
                </tr>
               </tbody>
               </table>
              </td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Meg Cabot</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Garth Nix</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
          <tr>
           <td width="18"></td>
           <td colSpan=2>
            <table style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px" cellspacing=0 cellpadding=0 border=0>
            <tbody>
             <tr>
              <td width="18"></td>
              <td style="DISPLAY:none"><input type="checkbox"/></td>
               <td style="FONT-SIZE: 10pt; WIDTH: 100%; CURSOR: hand" noWrap>Ann Brashares</td>
             </tr>
            </tbody>
            </table>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
     </table>
    </div>
    </body>
    </head>
    </html>
  3. 总结
    上面这个treeview很丑陋,实现很简单.就是通过一些表格嵌套来实现,在节点上通过添加onclick事件函数来控制下一级所有节点的显示.
    相信大家能够很容易看懂这个例子.
    但是,怎样动态显示treeview呢?其实动态页面的显示,最后都是静态的html显示在ie上,可以在服务端,不管是asp,还是jsp,将树的内容写到页面上,根据不同的情况显示tree的内容.
    比如:一个公司的组织架构,可以在服务器端程序把公司的组织架构查询出来,然后out.print在页面上,返回给客户端ie;商品的类目也可以动态的查询出来,显示在treeview上.
chenxiaohua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BehaviorTree.js：行为树JavaScript实现
02-03
BehaviorTree.js 行为树JavaScript实现。 它们对于实现AI很有用。 如果您需要有关行为树的更多信息，请查看 ， 不错的。 产品特点 需要的：序列，选择器，任务 扩展：装饰器 安装 如果使用npm： npm install behaviortree 或使用纱线： yarn add behaviortree 依赖关系？ 该软件包没有自己的依赖性。 如何使用 首先，我要提到的是，也可以在诸如节点v8之类的common-js环境中使用此库。 为此，您应使用require()语句切换所有import语句。 所以代替 import { BehaviorTree , Sequence , Task , SUCCESS , FAILURE } from 'behaviortree' 只是使用 const { BehaviorTree , Sequence , Task , SUCCESS , FAILURE } = require ( 'behaviortree' ) 我使用新的ES模块语法，因为我认为它非常易读。 所以所有代码都是这样写的。 要查看两个版本的工
使用ViewModel模式简化WPF TreeView
寒冰屋的专栏
02-25 831
本文探讨如何使用ViewModel模式来更轻松地使用WPF中的TreeView控件。在此过程中，我们研究了为什么人们在使用WPF TreeView时经常遇到困难、什么是ViewModel，以及展示如何将TreeView与ViewModel结合的两个演示应用程序。其中一个演示展示了如何创建可搜索的TreeView，另一个演示如何实现延迟加载（也称为按需加载）。
静态页面结构树
最新发布
m0_62782752的博客
02-28 101
效果图 中的结构树部分。
【Javascript】【UI】纯原生代码实现树状控件：TreeView
命运之手
08-04 4753
此控件参考aimaraJS优化而来，由原生js实现，注释详细，代码最大幅度简化 不依赖任何库，只有一个js文件和一个css文件 效果展示 html代码 <html> <head> <title>TreeView</title> <link rel="icon" href="./image/tree.p...
bootstrap-treeview
xiaoyushiying的专栏
07-28 5648
bootstrap-treeview 简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。  插件依赖 Bootstrap v3.0.3jQuery v2.0.3 以上两
JavaScript Treeview
weixin_30568715的博客
07-07 691
　I had a second development project of OCS ，The main task is to development organization tree in tag page.But you kown,tag page is not support by treeview using c# ,so we must development treeview us...
JavaScript TreeView
weixin_34126557的博客
08-05 97
这个JS数是对AJAX TreeView 里的进一步修改，可以 继承 Sbqcel_Tree 类,该类的构造函数需要显示树HTML的父节点的ID传进来,这里最好让树的实例名和父节点ID一致,因为有些事件方法需要用树实例去调用. 在继承类里需要注意的是: 1). 必须指定AJAX调用的地址: 2).必须实现方法 openNode,在这个方法里必须调用方法 openCloseNode ...
使用jsTree实现js树形结构
06-07
例程可正常使用，非常的简单，基本上学过几天代码的人都能够正常使用。采用纯js编写，不复杂
liquor-tree：基于Vue.js的树组件
02-06
酒树Vue树组件，可让您以美观合理的方式呈现层次结构化的数据。 |产品特点拖放移动友好每个动作的事件灵活的配置每页任意数量的实例多选键盘导航过滤分类与Vuex集成安装Npm： $ npm install liquor-tree 纱： $ yarn...
javascript-TreeView父子联动效果保持节点状态一致
10-30
javascript-TreeView父子联动效果保持节点状态一致
javascript TreeView(5款)
03-18
收集的几款漂亮的javascript TreeView 控件
Javascript 实现TreeView CheckBox全选效果
10-29
Javascript 实现TreeView CheckBox 选中父节点时所有子节点全选，取消时全部取消
javascript实现treeview
12-10
用JavaScript实现树结构，单节节点，展开和收缩
node-file-tree:Node.js 文件树
05-30
节点文件树 Node.js 文件树 跑步： node index
javascript 静态树菜单实现代码
01-19
我发现添加一些css，这棵树在静态页面还是大有用途的！ .expand{ cursor:pointer; } .hide{ cursor:pointer; } 定义列表也能变成一棵树： 菜单1 1.1 aaa 1.2 bbb 1.3 ccc 菜单2 2.1 你好 超链接 菜单3 3.1 ...
mysql 家谱树查询_GitHub - chenwei/FamilyTreeView: 家谱树绘制Demo
weixin_28894541的博客
02-18 684
FamilyTreeView重大改进，增加仿“亲友+”App的家谱，与之前的没有任何关联，可以直接翻到第二部分“仿亲友+家谱”部分进行阅读家谱树绘制Demo，主要使用自定义ViewGroup，和使用canvas进行划线，现阶段实现了自己、配偶、兄弟姐妹、父母、祖父母、外祖父母、子女和儿媳妇，女婿以及孙子，共五代的绘制，加入了touch事件可以移动，代码可能写得相对比较死，基本只能使用于家谱展示。还...
前端实现一个Tree组件，您看这篇就够了
Liu_csdn_csdn的博客
07-19 3445
Tree组件，也就是树组件，数据结构当中的树也与此类似。开发树组件的难点是什么：是如何构建子树，其实很容易想到用**递归**构建子树。这里Tree组件分了两种：节点名称前面带复选框的和不带复选框的。树组件代码：......
综合运用html、css、javascript实现一个简易购物车静态页面
12-22
这是一个简易购物车静态页面的示例： ```html <!DOCTYPE html> , initial-scale=1.0"> 购物车 /* CSS样式 */ .container { width: 80%; margin: 0 auto; } .item { display: flex; align-items: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值