JS实现表格数据各种搜索功能的方法


Posted in Javascript onMarch 03, 2015

本文实例讲述了JS实现表格数据各种搜索功能。可忽略大小写,模糊搜索,多关键搜索。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <script type="text/javascript">

   window.onload=function(){

    var oTab=document.getElementById("tab");

    var oBt=document.getElementsByTagName("input");

    oBt[1].onclick=function(){

     for(var i=0;i<oTab.tBodies[0].rows.length;i++)

     {

      var str1=oTab.tBodies[0].rows[i].cells[1].innerHTML.toUpperCase();

      var str2=oBt[0].value.toUpperCase();

      //使用string.toUpperCase()(将字符串中的字符全部转换成大写)或string.toLowerCase()(将字符串中的字符全部转换成小写)

      //所谓忽略大小写的搜索就是将用户输入的字符串全部转换大写或小写,然后把信息表中的字符串的全部转换成大写或小写,最后再去比较两者转换后的字符就行了

      /*******************************JS实现表格忽略大小写搜索*********************************/

      if(str1==str2){

       oTab.tBodies[0].rows[i].style.background='red';

      }

      else{

        oTab.tBodies[0].rows[i].style.background='';

      }

     /***********************************JS实现表格的模糊搜索*************************************/

     //表格的模糊搜索的就是通过JS中的一个search()方法,使用格式,string1.search(string2);如果

     //用户输入的字符串是其一个子串,就会返回该子串在主串的位置,不匹配则会返回-1,故操作如下

     if(str1.search(str2)!=-1){oTab.tBodies[0].rows[i].style.background='red';}

     else{oTab.tBodies[0].rows[i].style.background='';}

     /***********************************JS实现表格的多关键字搜索********************************/

     //表格的多关键字搜索,加入用户所输入的多个关键字之间用空格隔开,就用split方法把一个长字符串以空格为标准,分成一个字符串数组,

     //然后以一个循环将切成的数组的子字符串与信息表中的字符串比较

     var arr=str2.split(' ');

     for(var j=0;j<arr.length;j++)

     {

      if(str1.search(arr[j])!=-1){oTab.tBodies[0].rows[i].style.background='red';}

     }

     }

    }

   }

  </script>

 </head>

 <body>

  姓名:<input type="text" />

  <input type="button" value="搜索"/>

  <table border="1" bordercolor="blue" id="tab">

   <thead>

     <td><h2>ID</h2></td>

     <td><h2>Name</h2></td>

     <td><h2>Age</h2></td>

   </thead>

   <tbody>

    <tr>

     <td>1</td>

     <td>Blue</td>

     <td>15</td>

    </tr>

     <tr>

     <td>2</td>

     <td>Mikyou</td>

     <td>26</td>

    </tr>

     <tr>

     <td>3</td>

     <td>weak</td>

     <td>24</td>

    </tr>

     <tr>

     <td>4</td>

     <td>sky</td>

     <td>35</td>

    </tr>

     <tr>

     <td>5</td>

     <td>李四</td>

     <td>18</td>

    </tr>

   </tbody>

  </table>

 </body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
js中跨域方法原理详解
Jul 19 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 #Javascript
javascript验证身份证号
Mar 03 #Javascript
JS烟花背景效果实现方法
Mar 03 #Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 #Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 #Javascript
js+jquery常用知识点汇总
Mar 03 #Javascript
js实现宇宙星空背景效果的方法
Mar 03 #Javascript
You might like
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php和asp语法上的区别总结
2019/05/12 PHP
popdiv
2006/07/14 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
js实现页面图片消除效果
2020/03/24 Javascript
Python实现的计数排序算法示例
2017/11/29 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python执行精确的小数计算方法
2019/01/21 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python实现大学人员管理系统
2019/10/25 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
材料加工工程求职信
2014/02/19 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
Django如何与Ajax交互
2021/04/29 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL