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.οnlοad=function(){ tablex("mission",true,"#ffffff","#ccccff","#aaccff ","#ffcccc"); document.getElementById("delete").οnclick=deleteSe lected("isClick"); document.getElementById("search").οnclick=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、删除选中结点
  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值