需要实现的任务： 1、点击元素的增添按钮时候，在该节点下增添节点（ 可与页面初始化时候的增添函数合并；封装函数； ） 若无子节点，标题前面显示为空； 2、删除节点，当点击删除按钮时候，删除该按钮的父元素 3、 点击元素节点的时候，判断节点下边是否还有节点 如果有，合拢，并将该节点的显示成合拢状态 如果节点的下边无节点，将其打开，节点显示成打开状态 4、查询节点，通过循环树节点，与输入值进行匹配，相同则将 其背景色显示为红色，如果找到的节点处于被父节点折叠隐藏的状态，则需要做对应的展开<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta charset="utf-8"><title>无标题文档</title><style>body{ display:flex; align-item:center; justify-content:center; background:#096; font-size:15px; font-style:"微软雅黑"; color:#000; font-weight:bold; }#tree{ width:400px; height:400px; border:1px solid #eee; background-color:#fff; margin-top:100px; position:relative; padding:20px 20px; }#node{ height:350px; width:350px; margin:10px 10px 10px 10px; }.nodeShow{ width:200px; line-height:20px; margin:10px 15px; }.nodeHide{ display:none; }#footer{ position:absolute; background:#066; width:400px; height:50px; bottom:0px; left:0px; }#form{ position:absolute; top:15px; right:10px; }.display{ border:2px solid #000; display:inline-block; text-decoration:none; width:10px; height:10px; color:#000; text-align:center; vertical-align:top; line-height:8px; padding:1px 1px 1px 1px; }.add,.del{ margin-left:6px; display:none; vertical-align:top; }.nodeHead span{ cursor:pointer; margin-left:3px; }.nodeHead:hover >.add,.nodeHead:hover >.del{ display:inline; cursor:pointer; }</style></head><body><div id="tree"> <div class="nodeShow" id="node"> <span class="nodeHead" id="car"> <span class="txt"> <a class="display" href="javascript:;">+</a> 汽车 </span> <img class="add" src="images/01.png"> </span> </div> <div id=footer> <div id="form"> <input type="text" id="txt"/> <input type="button" id="btn1" value="查找结点"/> </div> </div></div><script type="text/javascript" src="js/tree.js"></script></body></html>JavaScript代码//增加子元素function addChild(parent,text){ var img1=document.createElement("img"); var img2=document.createElement("img"); img1.setAttribute("src","images/01.png"); img2.setAttribute("src","images/02.png"); img1.setAttribute("class","add"); img2.setAttribute("class","del"); var display=document.createElement("a"); display.setAttribute("href","javascript:;"); display.setAttribute("class","display"); var word1=document.createTextNode("+"); display.appendChild(word1); var ospan=document.createElement("span"); var text=document.createTextNode(text); ospan.setAttribute("class","txt"); ospan.appendChild(display); ospan.appendChild(text); var nodeHead=document.createElement("span"); nodeHead.setAttribute("class","nodeHead"); nodeHead.appendChild(ospan); nodeHead.appendChild(img1); nodeHead.appendChild(img2); var nodeShow=document.createElement("div"); nodeShow.setAttribute("class","nodeShow") nodeShow.appendChild(nodeHead); parent.appendChild(nodeShow); }//树的初始化var node=document.getElementById("node");var txtArr=document.getElementsByClassName("txt");var nodeShowArr=document.getElementsByClassName("nodeShow");addChild(node,"英国品牌");addChild(nodeShowArr[1],"路虎");addChild(nodeShowArr[1],"捷豹");addChild(node,"德国品牌");addChild(nodeShowArr[4],"宝马");addChild(nodeShowArr[4],"奔驰");addChild(nodeShowArr[4],"奥迪");addChild(node,"美国品牌");addChild(nodeShowArr[8],"福特");addChild(nodeShowArr[8],"林肯");//遍历数组function nextsiblings(nodeElement){ if(nodeElement){ arr.push(nodeElement.nextSibling); nextsiblings(nodeElement.nextSibling); }}for(var i=0;i<txtArr.length;i++){ txtArr[i].onclick=function(){ arr=[]; var self=this; nextsiblings(this.parentNode); if(arr.length>1&&foldNode(this.parentNode.parentNode)==true){ for(var j=0;j<arr.length;j++){ if(arr[j].className=="nodeShow"){ arr[j].style.display="none"; console.log(arr[j]); self.firstChild.innerHTML="-"; } } } } }//判断节点是否收拢function foldNode(nodeElement){ if(nodeElement.childNodes.length>1){ return true; }}var arr=[];var data=[];traverseDF(node,data);////js多叉树深度优先遍历function traverseDF(node,nodeList){ if(node){ nodeList.push(node); for(var i=0,len=node.children.length;i<len;i++){ if(node.children[i].className=="nodeShow"){ traverseDF(node.children[i],nodeList); } } } }//添加浏览器兼容事件function addEvent(el,type,handler){ if(el.addEventListener){ el.addEventListener(type,handler,false); }else if(el.attachEvent){ el.attachEvent("on"+type,handler); }else{ el["on"+type]=handler; } }
1 回答
杰杰就是我
TA贡献32条经验 获得超24个赞
我看了一下 你的代码 首先你往 arr里面存入数据, 可以得到长度, 但是你得到的长度始终比你 子节点的长度 大1 , 所以导致 出错 ,因为最后一个为null, 请思考一下问题的所在
添加回答
举报
0/150
提交
取消