Home >Web Front-end >JS Tutorial >Wrote an XML Tree infinite tree js version_javascript skills

Wrote an XML Tree infinite tree js version_javascript skills

WBOYOriginal: 2016-05-16 19:09:01955browse

<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> 
 
 
<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>

<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 to select all Note: If you need to introduce external Js, you need to refresh to execute ]

<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> 
 
 
<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> 
 
<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 to select all Note: If you need to introduce external Js, you need to refresh to execute ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：There are many comments on the difference between the two implementations of JS class definition prototype method_js object-orientedNext article：There are many comments on the difference between the two implementations of JS class definition prototype method_js object-oriented

Related articles

See more