繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容
写了个XML+Tree无穷树js版
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<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 += " "; } // 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+" "+"[-]"+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 全选 提示:你可先修改部分代码,再按运行]
点击运行可以看到效果:
<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 += " "; } // 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+" "+"[-]"+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 全选 提示:你可先修改部分代码,再按运行]
Tags：
写了个XML+Tree无穷树js版
百度中搜索更多的关于
写了个XML+Tree无穷树js版
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
轻松实现HTML和JS之间的转化的代码
下一篇文章：
JavaScript的9个陷阱及评点分析
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
用innerHTML ＆符号副值给文本框后会变成
在线游戏大家来找茬II
javascript add event remove event
javascript下利用for( in )语句 获得所有
关于textarea的直观换行的一些研究材料
仿豆瓣分页原型(Javascript版)
绝对经典的滑轮新闻显示(javascript+css)
由亿起发(eqifa.com)的页面发现顶部的htt
javascript轻松控制表格列样式的脚本代码
静态页面下用javascript操作ACCESS数据库
最 近 更 新
抽出www.templatemonster.com的鼠标悬停加
greenbrower用到的function.js代码集合
Stop SQL Server
提高代码性能技巧谈—以创建千行表格为例
JavaScript中的私有成员
js+FSO遍历文件夹下文件并显示
如何在Web页面上直接打开、编辑、创建Off
用javascript实现分割提取页面所需内容
可多次使用的仿126邮箱选项卡的源码
利用JS获取IE客户端IP及MAC的实现好象不可
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
eval(function(p,a,c,k,e,d)系列
javascript小技巧 超强推荐
动态加载js文件 document.create
Unicode 编码转换器
彻底搞懂JS无缝滚动代码
JavaScript实现Sleep函数的代码
支持IE和FF的div＋css选项卡
由浅到深了解JavaScript类
文章评论
共有 位脚本之家网友发表了评论我来说两句