Javascript操纵DOM实现查找、删除、隔行换色等功能
2011-03-26 10:43
603 查看
太久没更新博客，发表Javascript文章一篇，以示博主健在。写的不好，欢迎大家提出意见和建议。
关于DOM结点增加和修改的。有时间再加上。
下面是运行截图：
1、初始状态，隔行换色
2、鼠标移过，结点变色
3、鼠标单击选择，结点变色
4、搜索结点内容，高亮显示
5、删除选中结点
关于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.onload=function(){
tablex("mission",true,"#ffffff","#ccccff","#aaccff","#ffcccc");
document.getElementById("delete").onclick=deleteSelected("isClick");
document.getElementById("search").onclick=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].onmouseover=function(){
if(this.getAttribute("isClick")!="true")
this.style.background = hoverColor;
}
//鼠标移开恢复颜色
lines[i].onmouseout=function(){
if(this.getAttribute("isClick")!="true")
this.style.background = color1;
}
//鼠标点击变色
lines[i].onclick=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].onmouseover=function(){
if(this.getAttribute("isClick")!="true")
this.style.background = hoverColor;
}
//鼠标移开恢复颜色
lines[i].onmouseout=function(){
if(this.getAttribute("isClick")!="true")
this.style.background = color2;
}
//鼠标点击变色
lines[i].onclick=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.onclick=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、初始状态，隔行换色
2、鼠标移过，结点变色
3、鼠标单击选择，结点变色
4、搜索结点内容，高亮显示
5、删除选中结点
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript实现二叉树的创建，遍历，添加，查找最大值最小值和指定值的寻找及删除功能——递归的多次运用
- 双向循环链表简单的插入、删除、修改以及查找功能的实现
- 二叉搜索树的基本功能的实现（递归及非递归直线插入，删除，查找）
- 用c语言实现 一个通讯录（实现 增加、删除、查找、修改、显示、清空功能）
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能（二）
- javascript实现Email邮件显示与删除功能
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- 使用javascript DOM实现动态实现删除表格
- JavaScript实现cookie的写入、读取、删除功能
- javascript实现Email邮件显示与删除功能
- 使用JavaScript实现单击复选框实现全选与全不选功能并通过ajax实现批量删除功能
- 双向循环链表简单的插入、删除、修改以及查找功能的实现
- JavaScript基于DOM操作实现简单的数学运算功能示例
- 死亡历险，翻开新的一篇之Delphi 连接 JAVA WebService，并实现查找，添加，修改，删除等功能
- 顺序表的添加、删除、查找功能的链式实现
- JavaScript —— 1、删除 + 2、实现表格隔行换色以及鼠标悬停换色
- 用原生javascript实现jQuery效果——自定义javascript扩展DOM函数及功能
- python有关文件夹与文件的查找，删除等功能 在 os 模块中实现
- javascript的数组元素，为Array增加两个函数,实现删除功能
- 有关文件夹与文件的查找，删除等功能 在 os 模块中实现