이 글의 예시에서는 자바스크립트를 이용하여 트리 메뉴를 동적으로 생성하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
//========================================
//Envrionment to hold Listeners
//========================================
tv_listeners = new Array() ;
function listener( type , handler ) {
this.type = type ;
this.handler = handler ;
this.id = tv_listeners.length ;
tv_listeners[ tv_listeners.length ] = this ;
}
function addListener( type , handler ) {
new listener( type , handler ) ;
}
//=== END =====
//=========================================
// Hold the top item
//=========================================
tv_topnodeitem = null ;
//===== END =======
//=========================================
//Hold nodeitems , and supply a nodeitem Register
//=========================================
nodeitems = new Array() ;
function nodeitemRegister( obj ) {
nodeitems[ nodeitems.length ] = obj ;
return nodeitems.length - 1 ;
}
//=== END =======
//=================================
//Custom a stack
//Class : stack
//metheds : get()
// put( obj )
//=================================
function stack() {
this.value = new Array() ;
this.cursor = 0 ;
}
function stack_get() {
this.cursor = this.cursor - 1 ;
return this.value[ this.cursor ] ;
}
function stack_put( obj ) {
this.value[ this.cursor ] = obj ;
this.cursor = this.cursor + 1 ;
}
stack.prototype.get = stack_get ;
stack.prototype.put = stack_put ;
//=======END ==========
//=========================================
// Define a public stack
//=========================================
userstack = new stack() ;
//====== END ===========
//=========================================
//Image List
//=========================================
treeview_box_0_none = "../images/4_clos.gif" ;
treeview_box_0_line = "../images/4_none.gif" ;
treeview_box_2_open = "../images/2_open.gif" ;
treeview_box_2_none = "../images/2_none.gif" ;
treeview_box_2_close = "../images/2_clos.gif" ;
treeview_box_1_open = "../images/3_open.gif" ;
treeview_box_1_none = "../images/3_none.gif" ;
treeview_box_1_close = "../images/3_clos.gif" ;
//===============================================
//Class : nodeitem
//status------------------------1:two-direction 0:nobox 0: disactivite
// 2:three-0direction 1:close-box 1: activite
// 2:open-box
//===============================================
function nodeitem( parentkey , key , lable , img ) {
this.lable = lable ;
this.key = key ;
this.parent = findNode( parentkey ) ;
if( this.parent != null ) {
aa = this.parent.status ;
if( aa.substring( 1 , 2 ) == "0" )
this.parent.status = aa.substring( 0 , 1 ) + "1" + aa.substring( 2 , 3 ) ;
if( this.parent.maxsubitem != null )
this.parent.maxsubitem.status = "2" + this.parent.maxsubitem.status.substring( 1 , 3 ) ;
this.parent.subitems[ this.parent.subitems.length ] = this ;
this.parent.maxsubitem = this ;
}
else {
if( tv_topnodeitem != null ) {
alert( "不能有两个顶项!" ) ;
return ;
}
tv_topnodeitem = this ;
}
this.img = img ;
this.tag = null ;
this.status = "100" ;
this.subitems = new Array() ;
this.maxsubitem = null ;
this.id = nodeitemRegister( this ) ;
//**********************
this.questionId = 0;
this.description = "";
//this.url = null;
//**********************
//added by msb for the sort and move up/down
/*if ( this == tv_topnodeitem )
{
this.nodeIndex = 0;
} else {
this.nodeIndex = this.parent.subitems.length;
}*/
//end added
}
//added by msb for the sort and move up/down
function nodeitem_moveUp() {
if (this == tv_topnodeitem) return; //topitem
ssubitems = this.parent.subitems;
for ( i=0; i<ssubitems.length; i++ ) {
if( ssubitems[i] == this ) {
break;
}
}
if (i==0) return;
ssubitems[i] = ssubitems[i-1];
ssubitems[i-1] = this;
if (i==ssubitems.length-1) {
ssubitems[i-1].status = "2" + ssubitems[i-1].status.substring(1, 3);
ssubitems[i].status = "1" + ssubitems[i].status.substring(1, 3);
}
/*
itemTemp = this;
ssubitems[this.nodeIndex-1] */
/* for ( i=0; i<ssubitems.length; i++ ) {
if( ssubitems[i] != null && ssubitems[i].nodeIndex == (this.nodeIndex-1) )
previousitem = ssubitems[i]
}
previousitem.nodeIndex = this.nodeIndex;
this.nodeIndex = this.nodeIndex -1;
swap(this,previousitem);
*/
//label_on_click(this.id);
this.parent.refresh();
lable_on_click(this.id);
}//moveUp()
function nodeitem_moveDown() {
if (this == tv_topnodeitem) return; //topitem
ssubitems = this.parent.subitems;
for ( i=0; i<ssubitems.length; i++ ) {
if( ssubitems[i] == this ) {
break;
}
}
if (i==ssubitems.length-1) return;
ssubitems[i] = ssubitems[i+1];
ssubitems[i+1] = this;
if (i==ssubitems.length-2) {
ssubitems[i+1].status = "1" + ssubitems[i+1].status.substring(1, 3);
ssubitems[i].status = "2" + ssubitems[i].status.substring(1, 3);
}
this.parent.refresh();
lable_on_click(this.id);
}//moveDown()
/*function swap (item1, item2) {
nodeitems[item1.id] = item2;
nodeitems[item2.id] = item1;
idTemp = item1.id;
item1.id = item2.id;
item2.id = idTemp;
}*/
//end added
function nodeitem_setTag( obj ) {
this.tag = obj ;
}
function nodeitem_getTag() {
return this.tag ;
}
function nodeitem_show() {
str = "<span id = 'preface" + this.id + "'><table border='0' cellspacing='0' cellpadding='0'><tr><td>" ;
str_f = "" ;
for( j = this.parent ; j != null ; j = j.parent ) {
if( j.status.substring( 0 , 1 ) == 1 )
str_f = "<img src = '" + treeview_box_0_none + "' align='absmiddle' alt="javascript_javascript 기술을 사용하여 트리 메뉴를 동적으로 생성하는 방법" >" + str_f ;
else
str_f = "<img src = '" + treeview_box_0_line + "' align='absmiddle' alt="javascript_javascript 기술을 사용하여 트리 메뉴를 동적으로 생성하는 방법" >" + str_f ;
}
str = str + str_f ;
str += "<img id = 'box" + this.id + "' nodeid = '" + this.id + "' src = '" ;
switch( this.status.substring( 0 , 2 ) ) {
case "10" : str += treeview_box_1_none ; break ;
case "11" : str += treeview_box_1_close ; break ;
case "12" : str += treeview_box_1_open ; break ;
case "20" : str += treeview_box_2_none ; break ;
case "21" : str += treeview_box_2_close ; break ;
case "22" : str += treeview_box_2_open ; break ;
}
str += "' align='absmiddle' onclick='box_on_click(this)'>" ;
if( this.img == "" )
str += this.img ;
else
str += "<img src = '" + this.img + "' align='absmiddle' style="max-width:90%" style="max-width:90%" alt="javascript_javascript 기술을 사용하여 트리 메뉴를 동적으로 생성하는 방법" >" ;
str += "</td><td><table border='0' cellspacing='1' cellpadding='1' style='font-size:9pt; color:#333333' id='lablePanel" + this.id + "'><tr><td ondblclick = 'lable_on_dblclick(" + this.id + ")' onclick='lable_on_click(" + this.id + ")' style='cursor:hand' id='f_lablePanel" + this.id + "' nowrap>" + this.lable + "</td></tr></table></td></tr></table>" ;
str += "</span><span id = 'tv_panel_" + this.id + "' style='display:" ;
if( this.status.substring( 1 , 2 ) == '2' )
str += "" ;
else
str += "none" ;
str += "'></span>" ;
if( this.parent == null )
for(var i in document.all){
if (document.all[i].tagName == "BODY")
{
document.all[i].insertAdjacentHTML( "AfterBegin" , str ) ;
break
}
}
else
document.all( "tv_panel_" + this.parent.id ).insertAdjacentHTML( "BeforeEnd" , str ) ;
for( m = 0 ; m < this.subitems.length ; m ++ )
if( this.subitems[ m ] != null ) {
userstack.put( m ) ;
this.subitems[ m ].show() ;
m = userstack.get() ;
}
}
function nodeitem_refresh() {
str = "<table border='0' cellspacing='0' cellpadding='0'><tr><td>" ;
str_f = "" ;
for( j = this.parent ; j != null ; j = j.parent ) {
if( j.status.substring( 0 , 1 ) == 1 )
str_f = "<img src = '" + treeview_box_0_none + "' align='absmiddle' alt="javascript_javascript 기술을 사용하여 트리 메뉴를 동적으로 생성하는 방법" >" + str_f ;
else
str_f = "<img src = '" + treeview_box_0_line + "' align='absmiddle' alt="javascript_javascript 기술을 사용하여 트리 메뉴를 동적으로 생성하는 방법" >" + str_f ;
}
str = str + str_f ;
str += "<img id = 'box" + this.id + "' nodeid = '" + this.id + "' src = '" ;
switch( this.status.substring( 0 , 2 ) ) {
case "10" : str += treeview_box_1_none ; break ;
case "11" : str += treeview_box_1_close ; break ;
case "12" : str += treeview_box_1_open ; break ;
case "20" : str += treeview_box_2_none ; break ;
case "21" : str += treeview_box_2_close ; break ;
case "22" : str += treeview_box_2_open ; break ;
}
str += "' align='absmiddle' onclick='box_on_click(this)'>" ;
if( this.img == "" )
str += this.img ;
else
str += "<img src = '" + this.img + "' align='absmiddle' style="max-width:90%" style="max-width:90%" alt="javascript_javascript 기술을 사용하여 트리 메뉴를 동적으로 생성하는 방법" >" ;
str += "</td><td><table border='0' cellspacing='1' cellpadding='1' style='font-size:9pt; color:#333333' id='lablePanel" + this.id + "'><tr><td ondblclick = 'lable_on_dblclick(" + this.id + ")' onclick='lable_on_click(" + this.id + ")' style='cursor:hand' id='f_lablePanel" + this.id + "' nowrap>" + this.lable + "</td></tr></table></td></tr></table>" ;
document.all( "preface" + this.id ).innerHTML = str ;
document.all( "tv_panel_" + this.id ).innerHTML = "" ;
for( m = 0 ; m < this.subitems.length ; m ++ )
if( this.subitems[ m ] != null ) {
userstack.put( m ) ;
this.subitems[ m ].show() ;
m = userstack.get() ;
}
}
function nodeitem_remove() {
pparent = this.parent ;
if( pparent == null ) {
removenodeitem( this.id ) ;
for(var i in document.all){
if (document.all[i].tagName == "BODY")
{
document.all[i].innerHTML = "" ;
break
}
}
return ;
}
lastsubitem = null ;
for( i = 0 ; i < pparent.subitems.length ; i ++ )
if( pparent.subitems[ i ] != null )
if ( pparent.subitems[ i ] == this )
pparent.subitems[ i ] = null ;
else
lastsubitem = pparent.subitems[ i ] ;
pparent.maxsubitem = lastsubitem ;
if( lastsubitem == null )
pparent.status = pparent.status.substring( 0 , 1 ) + "0" + pparent.status.substring( 2 , 3 ) ;
else
pparent.maxsubitem.status = "1" + pparent.maxsubitem.status.substring( 1 , 3 ) ;
removenodeitem( this.id ) ;
//added by msb for move up/down
arrTemp = new Array();
j = 0;
for ( i=0; i<pparent.subitems.length; i++ ) {
if ( pparent.subitems[i] != null ) {
arrTemp[j] = pparent.subitems[i];
j++;
}
}
this.parent.subitems = arrTemp;
//end added
pparent.refresh() ;
//tv_topnodeitem.refresh() ;
}
function removenodeitem( id ) {
curitem = nodeitems[ id ] ;
nodeitems[ id ] = null ;
for( m = 0 ; m < curitem.subitems.length ; m ++ )
if( curitem.subitems[ m ] != null ) {
userstack.put( m ) ;
removenodeitem( curitem.subitems[ m ].id ) ;
m = userstack.get() ;
}
}
function nodeitem_boxclick() {
if( this.status.substring( 1 ,2 ) == "0" )
return ;
if( this.status.substring( 1 ,2 ) == "1" )
this.open() ;
else
this.close() ;
}
function nodeitem_close() {
this.status = this.status.substring( 0 , 1 ) + "1" + this.status.substring( 2 , 3 ) ;
document.all( "tv_panel_" + this.id ).style.display = "none" ;
eval( "document.all( 'box' + this.id ).src = treeview_box_" + this.status.substring( 0 , 1 ) +"_close" ) ;
}
function nodeitem_open() {
this.status = this.status.substring( 0 , 1 ) + "2" + this.status.substring( 2 , 3 ) ;
document.all( "tv_panel_" + this.id ).style.display = "" ;
eval( "document.all( 'box' + this.id ).src = treeview_box_" + this.status.substring( 0 , 1 ) +"_open" ) ;
}
//added by msb for the move up/down
nodeitem.prototype.moveUp = nodeitem_moveUp;
nodeitem.prototype.moveDown = nodeitem_moveDown;
//end added
nodeitem.prototype.show = nodeitem_show ;
nodeitem.prototype.refresh = nodeitem_refresh ;
nodeitem.prototype.boxclick = nodeitem_boxclick ;
nodeitem.prototype.close = nodeitem_close ;
nodeitem.prototype.open = nodeitem_open ;
nodeitem.prototype.remove = nodeitem_remove ;
nodeitem.prototype.setTag = nodeitem_setTag ;
nodeitem.prototype.getTag = nodeitem_getTag ;
//==========================================================
// Public Methods
//==========================================================
function showTV() {
tv_topnodeitem.show() ;
}
function findNode( key ) {
pppp = null;
for( i = 0 ; i < nodeitems.length ; i ++ ) {
if( nodeitems[ i ] != null ) {
if( nodeitems[ i ].key == key ) {
pppp = nodeitems[ i ] ;
}
}
}
return pppp ;
}
function addNode( parentkey , key , lable , img ) {
return new nodeitem( parentkey , key , lable , img ) ;
}
function deleteNode( key ) {
curNode = findNode( key ) ;
if( curNode == null )
return false ;
curNode.remove() ;
return true ;
}
//====== END ================
//===========================================================
// Events
//===========================================================
function box_on_click( obj ) {
nodeitems[ obj.nodeid ].boxclick() ;
}
tv_curlable = null ;
tv_curlable_f = null ;
function lable_on_click( id ) {
key = nodeitems[ id ].key ;
if( nodeitems[ id ].parent == null )
parentkey = "" ;
else
parentkey = nodeitems[ id ].parent.key ;
if( tv_curlable != null ) {
tv_curlable.bgColor = "transparent" ;
tv_curlable.style.color = "#333333" ;
tv_curlable_f.bgColor = "transparent" ;
}
tv_curlable = document.all("lablePanel"+id) ;
tv_curlable.bgColor = "#000000" ;
tv_curlable.style.color = "#FFFFFF" ;
tv_curlable_f = document.all("f_lablePanel"+id) ;
tv_curlable_f.bgColor = "#888888" ;
for( i = 0 ; i < tv_listeners.length ; i ++ )
if( tv_listeners[ i ].type == "click" ) {
h = tv_listeners[ i ].handler ;
eval( h + "( '" + key + "' , '" + parentkey + "' ) ; " ) ;
}
}
function lable_on_dblclick( id ) {
key = nodeitems[ id ].key ;
if( nodeitems[ id ].parent == null )
parentkey = "" ;
else
parentkey = nodeitems[ id ].parent.key ;
if( tv_curlable != null ) {
tv_curlable.bgColor = "transparent" ;
tv_curlable.style.color = "#333333" ;
tv_curlable_f.bgColor = "transparent" ;
}
tv_curlable = document.all("lablePanel"+id) ;
tv_curlable.bgColor = "#000000" ;
tv_curlable.style.color = "#FFFFFF" ;
tv_curlable_f = document.all("f_lablePanel"+id) ;
tv_curlable_f.bgColor = "#888888" ;
for( i = 0 ; i < tv_listeners.length ; i ++ )
if( tv_listeners[ i ].type == "dblclick" ) {
h = tv_listeners[ i ].handler ;
eval( h + "( '" + key + "' , '" + parentkey + "' ) ; " ) ;
}
}
자바스크립트 호출
<script language="javascript"> <!-- addNode(-1,0,"hehe","../images/top.gif"); addNode(0,1,"haha","../images/top.gif"); addNode(0,2,"haha","../images/top.gif"); addNode(1,3,"haha","../images/top.gif"); addNode(1,4,"haha","../images/top.gif"); addNode(2,5,"haha","../images/top.gif"); addNode(2,6,"haha","../images/top.gif"); showTV(); --> </script>
이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.
JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.
Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AMPython은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.
Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AMPython과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.
C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AMC/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.
JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.
브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.
Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
3 몇 주 전ByDDD
Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법
2 몇 주 전ByDDD
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
WebStorm Mac 버전
유용한 JavaScript 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
Dreamweaver Mac版
시각적 웹 개발 도구
