Javascript操纵DOM实现查找、删除、隔行换色等功能-CSDN博客

太久没更新博客，发表Javascript文章一篇，以示博主健在。写的不好，欢迎大家提出意见和建议。

关于DOM结点增加和修改的。有时间再加上。

<html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <style> #mission {width:302px;line-height:20px;font-size:12px;overflow:hidden} #mission .line,#mission .head{height:20px;width:300px;*width:302px;border-top:solid 1px gray;border-left:solid 1px gray;border-right:solid 1px gray;} #mission .left, #mission .right{float:left;height:20px;overflow:hidden} #mission .left{width:80px;} #mission .right{width:220px;} #mission .head{color:white;background:#9999ff;font-weight:600} </style> <script type="text/javascript"> window.οnlοad=function(){ tablex("mission",true,"#ffffff","#ccccff","#aaccff","#ffcccc"); document.getElementById("delete").οnclick=deleteSelected("isClick"); document.getElementById("search").οnclick=createSearchBar("inputArea","mission","yellow","red"); lastBorderFix("mission","solid 1px gray"); } /* * 隔行换色&鼠标悬停变色&点击变色 * id : 获取id * hasHead : 表格是否有头部 * color1 : 隔行颜色1 * color2 : 隔行颜色2 * hoverColor : 鼠标移过去的颜色 * clickColor : 点击的颜色 */ function tablex(id,hasHead,color1,color2,hoverColor,clickColor){ var obj = document.getElementById(id); if(obj){ var lines = obj.children; /* * 隔行换色&鼠标悬停变色 */ for(var i=hasHead?1:0; i<lines.length; i++){ var divs = lines[i].children; if(i%2==0){ lines[i].style.background = color1; //鼠标悬停变色 lines[i].οnmοuseοver=function(){ if(this.getAttribute("isClick")!="true") this.style.background = hoverColor; } //鼠标移开恢复颜色 lines[i].οnmοuseοut=function(){ if(this.getAttribute("isClick")!="true") this.style.background = color1; } //鼠标点击变色 lines[i].οnclick=function(){ var attr = this.getAttribute("isClick"); if(attr == "true"){ this.style.background=color1; this.setAttribute("isClick","false"); }else{ this.style.background=clickColor; this.setAttribute("isClick","true"); } } }else{ lines[i].style.background = color2; //鼠标悬停变色 lines[i].οnmοuseοver=function(){ if(this.getAttribute("isClick")!="true") this.style.background = hoverColor; } //鼠标移开恢复颜色 lines[i].οnmοuseοut=function(){ if(this.getAttribute("isClick")!="true") this.style.background = color2; } //鼠标点击变色 lines[i].οnclick=function(){ var attr = this.getAttribute("isClick"); if(attr == "true"){ this.style.background=color2; this.setAttribute("isClick","false"); }else{ this.style.background=clickColor; this.setAttribute("isClick","true"); } } } } } } /* * 删除结点 * attrName : 属性名。如果该值为"isClick",表明删除属性名为isClick，且值为“true”的结点 */ function deleteSelected(attrName){ return function(){ var tbl = document.getElementById("mission"); var tblc = tbl.children; for(var i=0; i<tblc.length; i++){ if(tblc[i].getAttribute(attrName)=="true"){ tbl.removeChild(tblc[i--]); } } //删完记得重新改变颜色 tablex("mission",true,"#ffffff","#ccccff","#aaccff","#ffcccc"); lastBorderFix("mission","solid 1px gray"); } } /* * 增加最后一个div的底边框，懒得自己弄加class弄。 */ function lastBorderFix(id,lastBorderStyle){ var obj = document.getElementById(id).children; obj[obj.length-1].style.borderBottom=lastBorderStyle; } /* * 创建搜索框 * formAreaId 搜索框的位置 * searchAreaId 搜索框在哪里搜索 * highlightBGColor 结果高亮背景 * highlightFGColor 结果高亮前景 */ function createSearchBar(formAreaId,searchAreaId,highlightBGColor,highlightFGColor){ return function(){ var obj = document.getElementById(formAreaId); clearAllChild(obj); //移除formAreaId所有孩子结点，防止重复添加 var newForm = document.createElement("form"); var newInput = document.createElement("input"); newInput.setAttribute("type","text"); newInput.setAttribute("id","keyword"); var newButton = document.createElement("input"); newButton.setAttribute("type","button"); newButton.setAttribute("value","开始搜索"); newForm.appendChild(newInput); newForm.appendChild(newButton); obj.appendChild(newForm); //确定搜索时 newButton.οnclick=function(){ var value = document.getElementById("keyword").getAttribute("value") || document.getElementById("keyword").value; var obj = document.getElementById(searchAreaId); var objc = obj.children; tablex("mission",true,"#ffffff","#ccccff","#aaccff","#ffcccc");//初始化颜色 for(var i=0; i<objc.length; i++){ if(objc[i].innerHTML.indexOf(value)!=-1){ objc[i].style.background = highlightBGColor; objc[i].style.color = highlightFGColor; } } } } } /* * 移除eNode结点的所有孩子 * eNode 父结点 */ function clearAllChild(eNode){ var eNodec = eNode.children; for(var i=0; i<eNodec.length;){ eNode.removeChild(eNodec[0]); } } </script> </head> <body> <form action=""> <input type="button" value="删除" id="delete"/> <input type="button" value="增加" id="add"/> <input type="button" value="查找" id="search"/> </form> <div id="inputArea">  </div> <div id="mission"> <div class="head"> <div class="left">任务编号</div> <div class="right">任务描述</div> </div> <div class="line"> <div class="left">01</div> <div class="right">护送XXX大叔到波之国</div> </div> <div class="line"> <div class="left">02</div> <div class="right">救出阿斯玛队伍</div> </div> <div class="line"> <div class="left">03</div> <div class="right">找回佐助</div> </div> <div class="line"> <div class="left">04</div> <div class="right">打败大蛇丸</div> </div> <div class="line"> <div class="left">05</div> <div class="right">木叶村告急，速回</div> </div> <div class="line"> <div class="left">06</div> <div class="right">鸣人修炼仙术</div> </div> <div class="line"> <div class="left">07</div> <div class="right">出席五影大会</div> </div> <div class="line"> <div class="left">08</div> <div class="right">打败团藏</div> </div> </div> </body> </html>

下面是运行截图：

1、初始状态，隔行换色