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

本文介绍了一种使用JavaScript操作DOM元素的方法，并通过具体实例展示了如何实现表格的隔行变色、鼠标悬停变色及点击变色等功能。此外还实现了搜索框功能，能够高亮显示搜索结果并提供删除选中项的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　太久没更新博客，发表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、删除选中结点
　　