Community Learn Tools Library Leisure

English

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

WBOY

Release： 2016-05-16 19:09:01

Original

953 people have browsed it

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

Related labels：

写了个XML+Tree无穷树js版

source：php.cn

Previous article：There are many comments on the difference between the two implementations of JS class definition prototype method_js object-oriented Next article：Use JS to enter the email code to prevent spam_form effects

Statement of this Website

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

Latest Articles by Author

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29
From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41
Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51
Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31
Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51
Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41
Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41
PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21
Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11
The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

3

2225

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

11

2370

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

1979

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1864

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1936

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template