JS實現(xiàn)表格數(shù)據(jù)各種搜索功能的方法

更新時間：2015年03月03日 10:55:19 作者：mikyou

這篇文章主要介紹了JS實現(xiàn)表格數(shù)據(jù)各種搜索功能的方法,可實現(xiàn)忽略大小寫,模糊搜索,多關鍵搜索等功能,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)表格數(shù)據(jù)各種搜索功能?？珊雎源笮?模糊搜索,多關鍵搜索。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!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實現(xiàn)表格忽略大小寫搜索*********************************/

      if(str1==str2){

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

      }

      else{

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

      }

     /***********************************JS實現(xiàn)表格的模糊搜索*************************************/

     //表格的模糊搜索的就是通過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實現(xiàn)表格的多關鍵字搜索********************************/

     //表格的多關鍵字搜索，加入用戶所輸入的多個關鍵字之間用空格隔開，就用split方法把一個長字符串以空格為標準，分成一個字符串數(shù)組，

     //然后以一個循環(huán)將切成的數(shù)組的子字符串與信息表中的字符串比較

     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>