写了个XML+Tree无穷树js版

更新时间：2007年09月17日 20:26:22 作者：

<head> <style type="text/css"> .select {     width:80%;     border:0px solid #bfbfbf; } .options {     width:98%;     border:0px solid #ff0000; } .tree {     width:92%;     border:0px solid #ff0000; } </style> </head> <body> <xml id="Login"> <?xml version="1.0" encoding="utf-8" ?> <Students name="98班级">     <Student name="王小平">         <Chinese id="語文">            <Item id="单选题">              <Score id="33"></Score>              <Score id="33"></Score>              <Score id="33"></Score>            </Item>            <Item id="多选题">              <Score id="33"></Score>             </Item>            <Item id="计算题">              <Score id="33"></Score>            </Item>            <Item id="应用题">              <Score id="33"></Score>            </Item>            <Item id="附加题">              <Score id="33"></Score>            </Item>         </Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="王小波">         <Chinese id="語文">            <Item id="单选题">              <Score id="33"></Score>              <Score id="33"></Score>              <Score id="33"></Score>            </Item>            <Item id="多选题">              <Score id="33"></Score>             </Item>            <Item id="计算题">              <Score id="33"></Score>            </Item>            <Item id="应用题">              <Score id="33"></Score>            </Item>            <Item id="附加题">              <Score id="33"></Score>            </Item>         </Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="劉瓊">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="孟雲江">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="余敬興">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="金細愛">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="羅必洪">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="姜海平">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="姚軍">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="李海濤">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="陳平">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="胡光">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student> </Students> </xml> <body> <script> // var Box = function () {     return document.createElement("div"); } // // var desktop = document.body; // // // var Options = function () {     // } var Tree = function () {     //     var _this = this;     this._select = null;     this._options = null;     //     this.create = function (level,xml)     {         var space = "";         for(var i=0;i<level;i++)         {             space += "&nbsp;&nbsp;";         }         //         this._select = new Box();         this.appendChild(this._select);         this._select.className = "select";         this._select.innerHTML = space+"[+]"+xml.attributes[0].value;         //         this._options = new Box();         this.appendChild(this._options);         this._options.className = "options"; //        this._options.innerHTML = "options";         this._options.style.display = "inline";         //         this._select.onclick = function ()         {             if(_this._options.style.display == "inline")             {                _this._options.style.display = "none";             }             else             {                _this._options.style.display = "inline"             }         }         //         for(var i=0;i< xml.childNodes.length;i++)         {             //             if(xml.childNodes[i].childNodes.length>0)             {                 this._tree = new Box();                 this._options.appendChild(this._tree);                 this._tree.style.display = "inline";                 Tree.apply(this._tree);                 //                 this._tree.className = "tree";                 this._tree.create(level+1,xml.childNodes[i]);             }             else             {                 var div = new Box();                 this._options.appendChild(div);                 div.innerHTML = space+"&nbsp;&nbsp;"+"[-]"+xml.childNodes[i].attributes[0].value;             }             //         }         //     } } // var tree = new Box(); desktop.appendChild(tree); Tree.apply(tree); tree.className = "tree"; tree.style.left = 400; tree.create(0,Login.documentElement); </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

<head> <style type="text/css"> .select {     width:80%;     border:0px solid #bfbfbf; } .options {     width:98%;     border:0px solid #ff0000; } .tree {     border:0x solid #ff0000; } .treeView {     height:400px;     width:300px;     border:1x solid #ff0000;     overflow:auto; } </style> </head> <body> <xml id="Login"> <?xml version="1.0" encoding="utf-8" ?> <Students name="98班级">     <Student name="王小平">         <Chinese id="語文">            <Item id="单选题">              <Score id="33"></Score>              <Score id="33"></Score>              <Score id="33"></Score>            </Item>            <Item id="多选题">              <Score id="33"></Score>             </Item>            <Item id="计算题">              <Score id="33"></Score>            </Item>            <Item id="应用题">              <Score id="33"></Score>            </Item>            <Item id="附加题">              <Score id="33"></Score>            </Item>         </Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="王小波">         <Chinese id="語文">            <Item id="单选题">              <Score id="33"></Score>              <Score id="33"></Score>              <Score id="33"></Score>            </Item>            <Item id="多选题">              <Score id="33"></Score>             </Item>            <Item id="计算题">              <Score id="33"></Score>            </Item>            <Item id="应用题">              <Score id="33"></Score>            </Item>            <Item id="附加题">              <Score id="33"></Score>            </Item>         </Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="劉瓊">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="孟雲江">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="余敬興">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="金細愛">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="羅必洪">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="姜海平">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="姚軍">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="李海濤">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="陳平">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student>     <Student name="胡光">         <Chinese id="語文"></Chinese>         <Physics id="物理"></Physics>         <English id="英語"></English>         <Geography id="地理"></Geography>         <Historical id="歷史"></Historical>     </Student> </Students> </xml> <body> <script> // var Box = function () {     return document.createElement("div"); } // // var desktop = document.body; // // // var Options = function () {     // } var Tree = function () {     //     var _this = this;     this._select = null;     this._options = null;     //     this.create = function (level,xml)     {         var space = "";         for(var i=0;i<level;i++)         {             space += "&nbsp;&nbsp;";         }         //         this._select = new Box();         this.appendChild(this._select);         this._select.className = "select";         this._select.innerHTML = space+"[+]"+xml.attributes[0].value;         //         this._options = new Box();         this.appendChild(this._options);         this._options.className = "options"; //        this._options.innerHTML = "options";         this._options.style.display = "inline";         //         this._select.onclick = function ()         {             if(_this._options.style.display == "inline")             {                _this._options.style.display = "none";             }             else             {                _this._options.style.display = "inline"             }         }         //         for(var i=0;i< xml.childNodes.length;i++)         {             //             if(xml.childNodes[i].childNodes.length>0)             {                 this._tree = new Box();                 this._options.appendChild(this._tree);                 this._tree.style.display = "inline";                 Tree.apply(this._tree);                 //                 this._tree.className = "tree";                 this._tree.create(level+1,xml.childNodes[i]);             }             else             {                 var div = new Box();                 this._options.appendChild(div);                 div.innerHTML = space+"&nbsp;&nbsp;"+"[-]"+xml.childNodes[i].attributes[0].value;             }             //         }         //     } } // var tree = new Box(); desktop.appendChild(tree); Tree.apply(tree); tree.className = "treeView"; tree.style.left = 400; tree.create(0,Login.documentElement); // var tree1 = new Box(); desktop.appendChild(tree1); Tree.apply(tree1); tree1.className = "treeView"; tree1.style.position = "absolute"; tree1.style.top = 100; tree1.style.left = 400; tree1.create(0,Login.documentElement); // </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

写了个XML+Tree无穷树js版

JavaScript中各种时间转换问题详解(YYYY-MM-DD、时间戳、中国标准时间)
在某些场景下,需要将时间转换为字符串进行展示或传递,下面这篇文章主要给大家介绍了关于JavaScript中各种时间转换问题(YYYY-MM-DD、时间戳、中国标准时间)的相关资料,需要的朋友可以参考下
2024-02-02
轻松掌握JavaScript中介者模式
这篇文章主要帮助大家轻松掌握JavaScript中介者模式，告诉大家什么是js中介者模式？js中介者模式的作用是什么，感兴趣的小伙伴们可以参考一下
2016-08-08
firefox下对ajax的onreadystatechange的支持情况分析
firefox下对ajax的onreadystatechange的支持分析。用的到的朋友可以参考下。
2009-12-12
Layui表格行内动态编辑数据
本文主要介绍经典前端框架 layui 中的动态表格数据操作，结合 JQuery 动态编辑单元格中的数据，具有一定的参考价值，感兴趣的可以了解一下
2021-08-08
JavaScript实现复选框全选功能
这篇文章主要为大家详细介绍了JavaScript实现复选框全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
微信小程序实现人脸检测功能
这篇文章主要为大家详细介绍了微信小程序实现人脸检测功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
JS实现的Select三级下拉菜单代码
这篇文章主要介绍了JS实现的Select三级下拉菜单,涉及javascript动态创建下拉列表的技巧,非常具有实用价值,需要的朋友可以参考下
2015-08-08
Javascript学习笔记-详解in运算符
in运算符是javascript语言中比较特殊的一个，可以单独使用作为判断运算符，也常被用于for...in循环中遍历对象属性
2011-09-09
JS实现网页标题栏显示当前时间和日期的完整代码
这篇文章主要介绍了JS实现网页标题栏显示当前时间和日期的方法,涉及JavaScript日期时间函数及网页标题栏操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
使用tree shaking 移除无用代码
这篇文章主要为大家介绍了使用tree shaking 移除无用代码示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06

写了个XML+Tree无穷树js版

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具