夏日博客

A-A+

js dom 高级应用之表格搜索数据

2016年06月24日 前端设计 评论 5 条 阅读 8 views 次

js 对 table 的操作除了增删之外，还可以进行 table 表格数据的搜索，看来就差连接数据库了，如果 js 可以连接数据库的话，相信也是一个不错的语言了，呵呵，对于 table 表格的搜索原理也是对各个节点的操作，还利用 js 分割，js 数组比较，等函数，好了，还是老样子，先看如下的实例图片：

实例代码如下所示：

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script>  
  7.         window.onload = function () {  
  8.             var oTab = document.getElementById('tab1');  
  9.             var tBody = oTab.getElementsByTagName('tbody')[0];  
  10.             var btn2 = document.getElementById("btn2");  
  11.             var search = document.getElementById("search");  
  12.             btn2.onclick = function () {  
  13.                 //search()找到并返回字符串出现的位置，如果没有，返回-1  
  14.                 for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {  
  15.                     var tableRow = tBody.rows[i].cells[1].innerHTML.toLowerCase();//toLowerCase 不区分大小写，转成全小写  
  16.                     var searchRows = search.value.toLowerCase(); //xiariboke.net  
  17.                     var arr = searchRows.split(' ');//分割关键字  
  18.                     tBody.rows[i].style.background = "";  
  19.                     for (var j = 0; j < arr.length; j++) {//多个关键字搜索用此循环  
  20.                         //if (tableRow == searchRows) {//简单全字搜索  
  21.                         //if (tableRow.search(searchRows) != -1)//用seach方法模糊搜索  
  22.                         if(tableRow.search(arr[j])!=-1)//多个关键字搜索  
  23.                         {  
  24.                             tBody.rows[i].style.background = "yellow";  
  25.                         }  
  26.                         else {  
  27.   
  28.                         }  
  29.                     }  
  30.                 }  
  31.             };  
  32.         };  
  33.   
  34.     </script>  
  35. </head>  
  36. <body>  
  37.   
  38.     <input type="text" id="search" />  
  39.     <input type="button" id="btn2" value="搜索" />  
  40.   
  41.     <table id="tab1" border="1" width="500px">  
  42.         <thead>  
  43.             <td>ID</td>  
  44.             <td>姓名</td>  
  45.             <td>年龄</td>  
  46.         </thead>  
  47.         <tbody>  
  48.             <tr>  
  49.                 <td>1</td>  
  50.                 <td>Blue</td>  
  51.                 <td>27</td>  
  52.             </tr>  
  53.             <tr>  
  54.                 <td>2</td>  
  55.                 <td>张三</td>  
  56.                 <td>23</td>  
  57.             </tr>  
  58.             <tr>  
  59.                 <td>3</td>  
  60.                 <td>李四</td>  
  61.                 <td>28</td>  
  62.             </tr>  
  63.             <tr>  
  64.                 <td>4</td>  
  65.                 <td>张伟</td>  
  66.                 <td>28</td>  
  67.             </tr>  
  68.         </tbody>  
  69.     </table>  
  70. </body>  
  71. </html>  

到现在为止 js dom 的部分已经学完了，接下来应该学习 js 运动基础了。

标签：

5 条留言  访客：5 条  博主：0 条

  1. 昊宇节能设备 2016年06月28日 上午 10:19  -199楼  回复

    一看到代码就晕头转向的！

  2. 琪琪SEO 2016年06月25日 下午 9:10  -198楼  回复

    为啥琪琪SEO看到代码就晕菜了，上学的时候就不喜欢编程。

  3. 真我风采 2016年06月25日 下午 4:46  -197楼  回复

    看着有点像excel :mrgreen:

  4. 学史博客 2016年06月24日 下午 7:59  -196楼  回复

    搞的太专业了

  5. 香港虚拟主机 2016年06月24日 下午 5:04  -195楼  回复

    js dom 高级应用之表格搜索数据，这个除了用js来实现外好像很简单

给我留言