Home > Developer > JavaScript
<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> </pead> <body> <xml id = "Login"> <? Xml version = "1.0" encoding = "UTF-8"?> <Students name = "98 class"> <Student name = "Wang Xiaoping"> <Chinese id = "文"> <Item id =" single answer "> <Score id =" 33 "> </Score> <Score id =" 33 "> </Score> <Score id =" 33 "> </Score> </Item> <Item id =" multiple choice questions "> <Score id =" 33 "> </Score> </Item> <Item id =" calculation question "> <Score id =" 33 "> </Score> </ item> <Item id = "application question"> <Score id = "33"> </Score> </Item> <Item id = "additional question"> <Score id =" 33 "> </Score> </Item> </Chinese> <Physics id =" physical "> </Physics> <English id =" "> </English> <Geography id = ""> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "Wang Xiaobo"> <Chinese id = "Xiaowen"> <Item id = "single answer"> <Score id = "33"> </Score> <Score id = "33"> </Score> <Score id = "33"> </Score> </Item> <Item id = "multiple choice questions"> <Score id = "33"> </Score> </Item> <Item id = "calculation question"> <Score id = "33"> </Score> </Item> <Item id = "application question"> <Score id = "33"> </ score> </Item> <Item id = "additional question"> <Score id = "33"> </Score> </Item> </Chinese> <Physics id =" physics </Physics> <English id = ""> </English> <Geography id = "Geography"> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "zhuyun"> <Chinese id = "zhuwen"> </Chinese> <Physics id = "physical"> </Physics> <English id = ""> </English> <Geography id = ""> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "Meng zhijiang"> <Chinese id =" 文"> </Chinese> <Physics id =" physical "> </Physics> <English id = ""> </English> <Geography id = ""> </Geography> <Historical id = ""> </Historical> </ student> <Student name = ""> <Chinese id = "文"> </Chinese> <Physics id =" physical "> </Physics> <English id = ""> </English> <Geography id = ""> </Geography> <Historical id = ""> </Historical> </Student> <Student name = ""> <Chinese id =" 文"> </Chinese> <Physics id =" physical "> </Physics> <English id =" ""> </English> <Geography id =" "> </Geography> <Historical id =" "> </Historical> </Student> <Student name =" yi bihong "> <Chinese id =" 文"> </Chinese> <Physics id = "physical"> </Physics> <English id = ""> </English> <Geography id = "Geography"> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "Jiang Haiping"> <Chinese id =" 文"> </Chinese> <Physics id =" physical "> </Physics> <English id =" "> </English> <geography id = ""> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "yao miao"> <Chinese id = "文""> </Chinese> <Physics id = "physical"> </Physics> <English id = ""> </English> <Geography id =" geography "> </Geography> <Historical id =" "> </Historical> </Student> <Student name =" "> <Chinese id =" 文 "> </Chinese> <Physics id =" physical "> </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> <pistorical id = ""> </Historical> </Student> <Student name = "Hu Guang"> <Chinese id = "文"> </Chinese> <Physics id = "physical"> </Physics> <English id = ""> </English> <Geography id = ""> </Geography> <Historical id =" history "> </Historical> </Student> </Students> </xml> <body> script // var Box = function () {return document. createElement ("p");} // 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 p = new Box (); this. _ options. appendChild (p); p. 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.doc umentElement); script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
<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> </pead> <body> <xml id = "Login"> <? Xml version = "1.0" encoding = "UTF-8"?> <Students name = "98 class"> <Student name = "Wang Xiaoping"> <Chinese id = "文"> <Item id =" single answer "> <Score id =" 33 "> </Score> <Score id =" 33 "> </Score> <Score id =" 33 "> </Score> </Item> <Item id =" multiple choice questions "> <Score id =" 33 "> </Score> </Item> <Item id =" calculation question "> <Score id =" 33 "> </Score> </ item> <Item id = "application question"> <Score id = "33"> </Score> </Item> <Item id = "additional question"> <Score id =" 33 "> </Score> </Item> </Chinese> <Physics id =" physical "> </Physics> <English id =" "> </English> <Geography id = ""> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "Wang Xiaobo"> <Chinese id = "Xiaowen"> <Item id = "single answer"> <Score id = "33"> </Score> <Score id = "33"> </Score> <Score id = "33"> </Score> </Item> <Item id = "multiple choice questions"> <Score id = "33"> </Score> </Item> <Item id = "calculation question"> <Score id = "33"> </Score> </Item> <Item id = "application question"> <Score id = "33"> </ score> </Item> <Item id = "additional question"> <Score id = "33"> </Score> </Item> </Chinese> <Physics id =" physics </Physics> <English id = ""> </English> <Geography id = "Geography"> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "zhuyun"> <Chinese id = "zhuwen"> </Chinese> <Physics id = "physical"> </Physics> <English id = ""> </English> <Geography id = ""> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "Meng zhijiang"> <Chinese id =" 文"> </Chinese> <Physics id =" physical "> </Physics> <English id = ""> </English> <Geography id = ""> </Geography> <Historical id = ""> </Historical> </ student> <Student name = ""> <Chinese id = "文"> </Chinese> <Physics id =" physical "> </Physics> <English id = ""> </English> <Geography id = ""> </Geography> <Historical id = ""> </Historical> </Student> <Student name = ""> <Chinese id =" 文"> </Chinese> <Physics id =" physical "> </Physics> <English id =" ""> </English> <Geography id =" "> </Geography> <Historical id =" "> </Historical> </Student> <Student name =" yi bihong "> <Chinese id =" 文"> </Chinese> <Physics id = "physical"> </Physics> <English id = ""> </English> <Geography id = "Geography"> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "Jiang Haiping"> <Chinese id =" 文"> </Chinese> <Physics id =" physical "> </Physics> <English id =" "> </English> <geography id = ""> </Geography> <Historical id = ""> </Historical> </Student> <Student name = "yao miao"> <Chinese id = "文""> </Chinese> <Physics id = "physical"> </Physics> <English id = ""> </English> <Geography id =" geography "> </Geography> <Historical id =" "> </Historical> </Student> <Student name =" "> <Chinese id =" 文 "> </Chinese> <Physics id =" physical "> </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> <pistorical id = ""> </Historical> </Student> <Student name = "Hu Guang"> <Chinese id = "文"> </Chinese> <Physics id = "physical"> </Physics> <English id = ""> </English> <Geography id = ""> </Geography> <Historical id =" history "> </Historical> </Student> </Students> </xml> <body> script // var Box = function () {return document. createElement ("p");} // 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 p = new Box (); this. _ options. appendChild (p); p. 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.doc umentElement); // 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.doc umentElement); // script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
