지역 사회 배우다 도구 라이브러리 여가

한국어

집 > 웹 프론트엔드 > JS 튜토리얼 > XML 트리 무한 트리 js version_javascript 기술 작성

XML 트리 무한 트리 js version_javascript 기술 작성

WBOY

풀어 주다： 2016-05-16 19:09:01

원래의

953명이 탐색했습니다.

<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 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

<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 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

관련 라벨：

写了个XML+Tree无穷树js版

원천：php.cn

이전 기사：JS 클래스 정의 프로토타입 method_js 객체 지향의 두 구현 간의 차이점에 대한 많은 의견이 있습니다. 다음 기사：spam_form 효과를 방지하려면 JS를 사용하여 이메일 코드를 입력하세요.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

NullPointerException은 무엇이며 어떻게 해결합니까?

2024-10-22 09:46:29
초보자에서 코더까지: C 기초로 시작되는 여정

2024-10-13 13:53:41
PHP로 웹 개발 잠금 해제: 초보자 가이드

2024-10-12 12:15:51
C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길

2024-10-11 22:47:31
코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍

2024-10-11 19:36:51
내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C

2024-10-11 15:50:41
C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구

2024-10-11 15:07:41
PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계

2024-10-11 14:21:21
Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드

2024-10-11 12:59:11
코딩의 핵심: 초보자를 위한 Python의 힘 활용

2024-10-11 12:17:31

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() { ...

에서 2024-04-29 11:01:01

0

3

2225

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2370

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1979

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1864

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1936

관련 주제

더>

인기 추천

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿