A. DOM高级 07一次搜索多个关键词
来源:互联网 发布:步比网络离线秒赞 编辑:程序博客网 时间:2024/06/01 09:20
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="添加"/>
<input id="btn2" type="button" value="搜索"/>
<table id="table1" border="1px" width="400px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>大卡</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>leo</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>莫莫</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>aaa</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>bbb</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
window.onload=function()
{
var oTab=document.getElementById("table1");
var oBtn=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oTxt=document.getElementById("txt1");
var iNowId=oTab.tBodies[0].rows.length+1;//避免删除后重返id
/*==================搜索============================*/
oBtn2.onclick=function()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].index=i;
var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sValueInTxt=oTxt.value.toLowerCase();
var arr=sValueInTxt.split(" ");//通过splid分割搜索内容,返回数组
var bFound=false;//用来做是否包含的判断
for(var n=0;n<arr.length;n++)
{
if(sValueInTab.search(arr[n])!=-1)//忽略大小写
{
bFound=true;
break; //搜到就跳出,然后继续循环
}
}
if(bFound)
{
oTab.tBodies[0].rows[i].style.backgroundColor="yellow";//符合条件的变色
}
else//不符合条件的恢复颜色
{
oTab.tBodies[0].rows[i].style.backgroundColor=oTab.tBodies[0].rows[i].index%2?"#ccc":"";
}
}
};
/*===============添加表格=====================*/
oBtn.onclick=function()
{
var oTr=document.createElement("tr");
var oTd=null;
oTd=document.createElement("td");
oTd.innerHTML=iNowId++;//避免删除后重返id
oTr.appendChild(oTd);
oTd=document.createElement("td");
oTd.innerHTML=oTxt.value;
oTr.appendChild(oTd);
oTd=document.createElement("td");
oTd.innerHTML="<a href='javascript:;'>删除</a>";
oTr.appendChild(oTd);
/*===========================删除表格===============================*/
if(oTd.getElementsByTagName("a")[0])
{
oTd.getElementsByTagName("a")[0].onclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
}
oTab.tBodies[0].appendChild(oTr);
color();
};
/*=================高亮============================*/
color();
function color()
{
var i=0;
var oldColor;
for(i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background=i%2?"#ccc":"";//给双行添加背景
oTab.tBodies[0].rows[i].index=i;
oTab.tBodies[0].rows[i].onmouseover=function()
{
oldColor=this.style.backgroundColor;//保存原来的背景颜色
this.style.background="yellow";
};
oTab.tBodies[0].rows[i].onmouseout=function()
{
this.style.background=this.index%2?oldColor:"";//恢复
};
}
}
};
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="添加"/>
<input id="btn2" type="button" value="搜索"/>
<table id="table1" border="1px" width="400px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>大卡</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>leo</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>莫莫</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>aaa</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>bbb</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
window.onload=function()
{
var oTab=document.getElementById("table1");
var oBtn=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oTxt=document.getElementById("txt1");
var iNowId=oTab.tBodies[0].rows.length+1;//避免删除后重返id
/*==================搜索============================*/
oBtn2.onclick=function()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].index=i;
var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sValueInTxt=oTxt.value.toLowerCase();
var arr=sValueInTxt.split(" ");//通过splid分割搜索内容,返回数组
var bFound=false;//用来做是否包含的判断
for(var n=0;n<arr.length;n++)
{
if(sValueInTab.search(arr[n])!=-1)//忽略大小写
{
bFound=true;
break; //搜到就跳出,然后继续循环
}
}
if(bFound)
{
oTab.tBodies[0].rows[i].style.backgroundColor="yellow";//符合条件的变色
}
else//不符合条件的恢复颜色
{
oTab.tBodies[0].rows[i].style.backgroundColor=oTab.tBodies[0].rows[i].index%2?"#ccc":"";
}
}
};
/*===============添加表格=====================*/
oBtn.onclick=function()
{
var oTr=document.createElement("tr");
var oTd=null;
oTd=document.createElement("td");
oTd.innerHTML=iNowId++;//避免删除后重返id
oTr.appendChild(oTd);
oTd=document.createElement("td");
oTd.innerHTML=oTxt.value;
oTr.appendChild(oTd);
oTd=document.createElement("td");
oTd.innerHTML="<a href='javascript:;'>删除</a>";
oTr.appendChild(oTd);
/*===========================删除表格===============================*/
if(oTd.getElementsByTagName("a")[0])
{
oTd.getElementsByTagName("a")[0].onclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
}
oTab.tBodies[0].appendChild(oTr);
color();
};
/*=================高亮============================*/
color();
function color()
{
var i=0;
var oldColor;
for(i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background=i%2?"#ccc":"";//给双行添加背景
oTab.tBodies[0].rows[i].index=i;
oTab.tBodies[0].rows[i].onmouseover=function()
{
oldColor=this.style.backgroundColor;//保存原来的背景颜色
this.style.background="yellow";
};
oTab.tBodies[0].rows[i].onmouseout=function()
{
this.style.background=this.index%2?oldColor:"";//恢复
};
}
}
};
</script>
</body>
</html>
0 0
- A. DOM高级 07一次搜索多个关键词
- A. DOM高级06 表格搜索01
- 提高多个关键词搜索速度的方法
- ASP 多个关键词搜索,每个关键词以+号或空格隔开.
- 关键词 搜索
- 关键词搜索
- A DOM高级 03 表格隔行变色
- A DOM高级 04 表格添加行
- A. DOM高级 05 表格删除行
- 一次关键字输入,多个引擎同时搜索,提高搜索效率,减少解决问题的时间
- 织梦搜索提示关键词不少于2个字节
- 当DOM绑定多个事件时如何在执行之前做一次验证
- strpos实现多关键词模糊搜索
- 8个高级Google搜索技巧
- hdu 1043 Eight(八数码问题 高级搜索: A* 搜索)
- 高级DOM
- 使用网页爬虫(高级搜索功能)搜集含关键词新浪微博数据
- A. DOM高级 01表格的快速操作
- 第十二周项目2——摩托车继承自行车和机动车
- Android 性能测试实践(四) 流量
- ARM Linux 3.x的设备树(Device Tree)
- 数据库出现主键为空时的处理方法
- 第12周 项目四-点、圆关系(6)
- A. DOM高级 07一次搜索多个关键词
- 第十二周项目4——点与圆的关系{(判断两个圆面积的大小)
- ACM-数数小木块
- (2015-5-26)log4j日志禁止向服务器控制台输出
- 对话框加载bmp为背景
- HDU 5230
- grub2 设置引导 fedora22 Workstation Live
- 第12项目3-日期时间类
- WCF+SQL Server 2008 医院管理系统项目解析(一)