站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: JS实现表格数据各种搜索功能的方法
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

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

来源: 易采站长站

本文实例讲述了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++)

Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -