写了个XML+Tree无穷树js版

<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 全选注:如需引入外部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 += "  "; } // 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 全选注:如需引入外部Js需刷新才能执行]