搜索

字符串比较、忽略大小写----大小写转换、模糊搜索----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. MVC3+EF4.1学习系列(九)-----EF4.1其他的一些技巧的使用

    上节通过一系列重构 简单的项目就实现了 不过还有些EF的功能没有讲 这节就通过项目 讲讲EF其他的功能与技巧 一.直接执行SQL语句 通常来讲 EF 不用写SQL语句的  但是 在有些场合  比如对生 ...

  2. MVC3+EF4.1学习系列(四)----- ORM关系的处理

    上篇文章 终于把基础的一些操作写完了 但是这些都是单表的处理 而EF做为一个ORM框架  就必须点说说对于关系的处理 处理好关系 才能灵活的运用EF 关于关系的处理 一般就是  一对一   一对多  ...

  3. [转]最常见的20个jQuery面试问题及答案

    毫无疑问,jQuery给了JavaScript急需的提振,这是一门如此有用,但同时总是常常被低估的语言. 在 jQuery 粉墨登场之前,我们曾经会写出冗长的JavaScript代码,不仅仅为更大型的 ...

  4. .Net Core 中使用Session

    1.在 Startup 中 ConfigureServices 添加Session public void ConfigureServices(IServiceCollection services) ...

  5. javascript焦点图之缓冲滚动无缝切换

    在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...

  6. A - LCM Challenge

    A - LCM Challenge Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others ...

  7. vmware虚拟机如何安装ubuntu14.10系统

    vmware虚拟机安装ubuntu14.10系统安装步骤如下:

  8. 1077. [NOIP2010冲刺六] 数列游戏

    [题目描述] 小M很喜欢找点游戏自娱自乐.有一天,她在纸上写了一串数字:1,1,2,5,4.接着她擦掉了一个1,结果发现剩下1,2,4都在自己所在的位置上,即1在第1位,2在第2位,4在第4位.她希望 ...

  9. 对SNS网站现状和未来的一些想法——以我对人人网的体验为例

    现在对人人网越来越没有兴趣了,上面的照片.状态也越来越少了,反而是朋友圈里大家比较活跃. 我觉得在网上发内容的,至少是希望得到大家关注的,可是为什么人人越来越被大家嫌弃了呢? 人人上的消息越来越被淹没 ...

  10. OSI参考模型各层的主要功能

    OSI参考模型将整个通信功能划分为7个层次,其划分的主要原则是: 1网络中各主机有相同的层次 2 不同主机的同等层具有相同的功能 3同一主机内相邻层之间通过接口通信 4 每层可以使用下层提供的服务,并 ...