搜索

字符串比较、忽略大小写----大小写转换、模糊搜索----search的使用、split、高亮显示及筛选

toLowerCase() 方法用于把字符串转换为小写

str.search('')  找到并且返回字符串出现的位置,如果没找到-1

split() 方法用于把一个字符串分割成字符串数组,下面的例子用空格切割

<script>
var str='abc 123 ert';
var arr=str.split(' ');
alert(arr);
</script>

搜索

<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
var oTxt=document.getElementById('name');
var oBtn=document.getElementById('btn1'); oBtn.onclick=function ()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt=oTxt.value.toLowerCase(); var arr=sTxt.split(' ');
oTab.tBodies[0].rows[i].style.background=''; for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
}
}
}
}
</script>
</head> <body>
姓名:<input id="name" type="text"/> <input id="btn1" type="button" value="搜索"/>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>blue</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>李六</td>
<td>27</td>
<td></td>
</tr>
</tbody>
</table>
</body>

筛选

oBtn.onclick=function ()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt=oTxt.value.toLowerCase(); var arr=sTxt.split(' ');
oTab.tBodies[0].rows[i].style.display='none'; for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.display='block';
}
}
}
}

JS-DOM操作应用高级(二)的更多相关文章

  1. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. Node.js之操作文件系统(二)

    Node.js之操作文件系统(二) 1.创建与读取目录 1.1 创建目录 在fs模块中,可以使用mkdir方法创建目录,该方法的使用方法如下: fs.mkdir(path,[mode],callbca ...

  3. 关于js封装框架类库之DOM操作模块(二)

    上一篇基本实现了框架结构,但是与真正能用上的项目框架比较还是存在很多不足,在这又做了些加强与优化 (function ( window, undefined ) { var arr = [], pus ...

  4. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  5. SVG.js 元素操作整理(二)-Transform

    一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...

  6. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  7. JS DOM操作(二) Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  8. 学习blus老师js(5)--DOM操作应用高级

    一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...

  9. js——DOM操作(二)

    表格属性: tHead:表格头 tBodies:表格正文 tFoot:表格尾 rows:行 cells:列 表单操作: <form id="form1"> <in ...

  10. 第七节 DOM操作应用-高级

    表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. 带密钥的sha1加密

    带密钥的sha1加密: private static string HmacSha1Sign(string jsonStr, string secretKey, string enCoding ) { ...

  2. 杭电1002 Etaoin Shrdlu

    Problem Description The relative frequency of characters in natural language texts is very important ...

  3. alertview 添加图片

    - (void)willPresentAlertView:(UIAlertView *)alertView { 在这个方法中, 绘制需要的东西 uiview *myView = [uiview all ...

  4. docker network

    前言:前面的部分一直都是单机跑docker,但实际生产环境不可能只用一台来跑.肯定会用到多台,因为他们都是内部私有ip,那么多台主机之间的容器如何通信?这个是个很头疼的问题!目前主流几种方法如下: 1 ...

  5. CVE-2014-4113 Win8.1 64位利用(2014.11)

    CVE-2014-4113 Win8.1 64位利用 关于漏洞成因的分析已经很多了,但是样本针对的是win8之前的利用,国外研究员Moritz Jodeit对Win8.1上的利用做了研究,并给出了思路 ...

  6. 说说final关键字(好像有干货)

    在java开发过程中,final是大家常用的关键字,无非就是用来修饰类,方法和变量,来表名类不能被继承,方法不会被覆盖,变量不能被改变,悄悄的说一句,private方法也隐式的final.通过一段时间 ...

  7. python 自动认证登录

    import urllib import base64 import urllib2 def auto_login(urllink,username,password): authstr = 'Bas ...

  8. SpringMVC 学习-如何搭配使用 Velocity 页面模板

    一.快速搭建 Velocity 框架 1. 加入所需 Jar 包 <dependency> <groupId>org.apache.velocity</groupId&g ...

  9. .net core 时间戳转换

    /// <summary> /// 时间戳和日期的转化 /// </summary> public class DateTimeUtility { /// <summar ...

  10. 百度地图与融云的“冲突”(APP的.so手机架构目录,与Library的.so的手机架构目录冲突)

    在项目引进融云的IMkit时,总是报百度地图的错误,最开始以为是65535的错误,然后试着去改下百度地图,错误原因是在IMKit里面,它的.so库有这么几个目录 而我的app的libs里面的百度地图的 ...