js表格树形结构.docx

1、js表格树形结构竭诚为您提供优质文档/双击可除js表格树形结构篇一：js生成树形结构varimagespath=/images/;varcurrentnodename=;functionaddanode(nodeid,nodetype,isRoot,nodetext,nodelays,nodeimage,linkimage,parentnodeid)if(nodelays=1)parentnodeid=;if(parentnodeid=)parentnode=null;elseparentnode=eval(document.all.+parentnodeid);htmlcode=;htmlc

2、ode=htmlcode+;for(i=0;iswitch(parentnode.rows0.cellsi.img)caseblank.gif:caseenddots.gif:caseendplus.gif:caseendminus.gif:casesingleplus.gif:casesingleminus.gif:casesingledots.gif:htmlcode=htmlcode+;break;caseblankdots.gif:casedots.gif:caseplus.gif:caseminus.gif:casetopplus.gif:casetopminus.gif:caset

3、opdots.gif:htmlcode=htmlcode+th+blankdots.gifboRdeR=0;break;htmlcode=htmlcode+;htmlcode=htmlcode+;htmlcode=htmlcode+nodetext+;htmlcode=htmlcode+;htmlcode=htmlcode+;if(parentnode!=null)eval(document.all.+parentnodeid+child).rows0.cells0.innerhtml=eval(document.all.+parentnodeid+child).innerhtml+htmlc

4、ode;elsedocument.write(htmlcode);functionsetnodeFocus(nodename)if(currentnodename!=)varnodecellslen=eval(document.all.+currentnodename).rows0.cells.length;eval(document.all.+currentnodename).rows0.cellsnodecellslen-1.style.background=#9cd277;eval(document.all.+currentnodename).rows0.cellsnodecellsle

5、n-1.style.color=#000000;varnodecellslen=eval(document.all.+nodename).rows0.cells.length;eval(document.all.+nodename).rows0.cellsnodecellslen-1.style.background=#000077;eval(document.all.+nodename).rows0.cellsnodecellslen-1.style.color=#FFFFFF;currentnodename=nodename;if(eval(document.all.+nodename).

6、nodelays=4)varsplitstr=nodename.split(no);parent.document.all.paperlistifrm.src=paperlist.aspmediainfotype=parent.document.all.abstractifrm.src=;functionexpandchildnodes(nodename,childnodename)if(eval(document.all.+childnodename).style.display=none)if(eval(document.all.+childnodename).rows0.cells0.i

7、nnerhtml!=)varnodecellslen=eval(document.all.+nodename).rows0.cells.length;switch(eval(document.all.+nodename).rows0.cellsnodecellslen-3.img)caseendplus.gif:eval(document.all.+nodename+linkimage).src=imagespath+endminus.gif;break;caseendminus.gif:eval(document.all.+nodename+linkimage).src=imagespath

8、+endplus.gif;break;caseplus.gif:eval(document.all.+nodename+linkimage).src=imagespath+minus.gif;break;caseminus.gif:eval(document.all.+nodename+linkimage).src=imagespath+plus.gif;break;casetopplus.gif:eval(document.all.+nodename+linkimage).src=imagespath+topminus.gif;break;casetopminus.gif:eval(docu

9、ment.all.+nodename+linkimage).src=imagespath+topplus.gif;break;casesingleplus.gif:eval(document.all.+nodename+linkimage).src=imagespath+singleminus.gif;break;casesingleminus.gif:eval(document.all.+nodename+linkimage).src=imagespath+singleplus.gif;break;eval(document.all.+childnodename).style.display

10、=block;eval(document.all.+nodename+nodeimage).src=imagespath+of.gif;elseeval(document.all.+childnodename).style.display=none;varnodecellslen=eval(document.all.+nodename).rows0.cells.length;eval(document.all.+nodename+linkimage).src=imagespath+eval(document.all.+nodename).rows0.cellsnodecellslen-3.im

11、g;eval(document.all.+nodename+nodeimage).src=imagespath+eval(document.all.+nodename).rows0.cellsnodecellslen-2.img;setnodeFocus(nodename);functionnode()/第一层addanode(no0001,文件夹,False,组织结构,1,fold.gif,topplus.gif,);addanode(no0002,文件夹,False,综合管理,1,fold.gif,plus.gif,);/第二层addanode(no00010001,文件,False,中心

12、简介,2,file.gif,minus.gif,no0001);addanode(no00010002,文件,False,机构设置,2,file.gif,minus.gif,no0001);addanode(no00010003,文件,False,机构职能,2,file.gif,endminus.gif,no0001);addanode(no00020001,文件,False,先进性教育,2,file.gif,minus.gif,no0002);addanode(no00020002,文件,False,党务工作,2,file.gif,minus.gif,no0002);addanode(no0

13、0020003,文件,False,工会工作,2,file.gif,endminus.gif,no0002);node();以上代码可以正确无误执行，但无法显示连接图片，你可以用软件抓取资源管理其中使用的连接图片，或留下e-mail我给你传过去。我才发现我是一个多好的人！篇二：关于js树形结构js特效代码大全（七）超全的js树形菜单共享(20xx-09-20xx:03)标签：树形菜单特效代码js源代码下载分类：js特效代码大全js树形菜单是很常用的js特效代码，常用在管理软件当中，但是一套树形菜单已经不能满足需求，所以如果能有一套比较全面的树形菜单js特效代码，将会非常方便，下面懒人萱将超全的j

14、s树形菜单（dhtmlxtree）共享出来，相信你一定用得上。超全的js树形菜单共享一共包括八种，下面就一一介绍：1、不同表现方式的js树形菜单（如图所示）2、复选框式的js树形菜单（如图所示）左图为只可以选择单节点，右图为在选择子节点的同时选择父节点3、可以重新排列节点并且具有拖放功能的js树形菜单（如图所示）4、带有提示框的js树形菜单（如图所示）如果想打开或关闭某个节点，将会弹出一个警告框；如果选中或取消某个菜单前的复选框，也会有相应的文字提示。这个功能目前还没有想到会在什么情况下使用，但是可以先了解一下。5、将div菜单列表转换成树的js树形菜单（如图所示）左图为div菜单列表，右图为

15、转换后的树。6、可以异步加载数据的js树形菜单7、可以添加和删除菜单的js树形菜单（如图所示）包括添加子菜单和同级菜单两种。8、展开关闭节点的js树形菜单（如图所示）篇三：一个简单的js树形菜单一个简单的js树形菜单上图某电子商务平台的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。给个例子:复制代码代码如下:http:/www.w3.org/tR/xhtml1/dtd/xhtml1-transitional.dtdbodyfont-size:12px;h2,h3margin:0;ulmargin:0;padding:0;list-style:none;#outer_wraplipa

16、dding-left:30px;line-height:24px;.controlsymbolpadding:05px;border:1pxsolid#adff2f;cursor:pointer;标题1内容1内容2内容3内容4标题1_1内容1_1内容1_2内容1_3内容1_4标题1_2内容1_1内容1_2内容1_3内容1_4然后添加事件：复制代码代码如下:varinnertext=document.innertextinnertext:textcontent;varspan=document.createelement(span);spaninnertext=-;span.classname=

17、controlsymbol;function$(id)returndocument.getelementbyid(id);function$_()varargs=arguments;varret=;for(vari=0;ivartemp=document.getelementsbytagname(argsi);tryret=ret.concat(array.prototype.slice.call(temp,0);catch(e)for(varj=0;jret.push(tempj);returnret;functionaddsymbol(h)varinnerspan=span.cloneno

18、de(true);h.insertbefore(innerspan,h.firstchild);functionnext(el)while(el.nextsibling)if(el.nextsibling.nodetype=1)returnel.nextsibling;el=el.nextsibling;returnnull;varouterwrap=$(outer_wrap);varhs=$_(h2,h3);for(vari=0;iaddsymbol(hsi);outerwrap.onclick=function(event)event=event|window.event;vart=eve

19、nt.target|event.srcelement;if(t.classname=controlsymbol)varsn=next(t.parentnode);varsnstyle=next(t.parentnode).style;snstyle.display=(snstyle.display=block|snstyle.display=)none:block;tinnertext=tinnertext=+-:+;不过用的多的可能是动态的添加菜单，也就是动态的生成html序列。一个例子：复制代码代码如下:标题2:内容1,内容2,内容3,内容4,标题2_1:内容2_1,内容2_2,内容2_3

20、,内容2_4,标题2_2:内容2_1,内容2_2,内容2_3,内容2_4,内容5varfragment=document.createelement(ul);functionconcattree(tree)vararray=;for(varkeyintree)array.push();array.push(key);array.push();for(vari=0;iif(treekeyi.constructor=object)array=array.concat(concattree(treekeyi);elsearray.push();array.push(treekeyi);array.p

21、ush();array.push();returnarray;fragment.innerhtml=concattree(tree).join();$(outer_wrap).appendchild(fragment.firstchild);像上面的方法也可以用来生成表格，扯远了，比如复制代码代码如下:varoarray=thead:标题一,标题二,标题三,标题四,tbody:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,tfoot:25,26,27,28functioncreatetable(arr)varhtml=;html.push

22、();for(varkeyinarr)html.push();if(key=thead)assemtag(arrkey,html,th)elseif(key=tfoot)assemtag(arrkey,html,td)elseif(key=tbody)for(vark=0,len_1=arrkey.length;khtml.push();html.push();vartemp=document.createelement(div);temp.innerhtml=html.join();returntemp.firstchild;functionassemtag(array,html,tag)html.push();vars=;vare=;for(varj=0,len=array.length;jhtml.push(arrayj);html.push(e);html.push();document.body.appendchild(createtable(oarray);