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


  太久没更新博客,发表Javascript文章一篇,以示博主健在。写的不好,欢迎大家提出意见和建议。
  关于DOM结点增加和修改的。有时间再加上。     #mission {width:302px;line-height:20px;font-size:12px;overf low: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:6 00}   window.onload=function(){ tablex("mission",true,"#ffffff","#ccccff","#aaccff ","#ffcccc"); document.getElementById("delete").onclick=deleteSe lected("isClick"); document.getElementById("search").onclick=createSe archBar("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,clickCo lor){ var obj = document.getElementById(id); if(obj){ var lines = obj.children; /* * 隔行换色&鼠标悬停变色 */ for(var i=hasHead?1:0; i             任务编号 任务描述   01 护送XXX大叔到波之国   02 救出阿斯玛队伍   03 找回佐助   04 打败大蛇丸   05 木叶村告急,速回   06 鸣人修炼仙术   07 出席五影大会   08 打败团藏     下面是运行截图:
  1、初始状态,隔行换色
  
  2、鼠标移过,结点变色
  
  3、鼠标单击选择,结点变色
  
  4、搜索结点内容,高亮显示
  
  5、删除选中结点
  

你可能感兴趣的:(JavaScript)