JS中table模糊查询

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="text" name="" id="txt1" value="" />
 9         <input type="button" id="btn1" value="搜索" />
10         <table id="tab1" border="" cellspacing="" cellpadding="" width="40%">
11         <thead>
12             <tr>
13                 <td>ID</td>
14                 <td>姓名</td>
15                 <td>年龄</td>
16             </tr>
17         </thead>
18         <tbody>
19             <tr>
20                 <td>1</td>
21                 <td>张三</td>
22                 <td>27</td>
23             </tr>
24             <tr>
25                 <td>2</td>
26                 <td>李四</td>
27                 <td>20</td>
28             </tr>
29             <tr>
30                 <td>3</td>
31                 <td>张可爱</td>
32                 <td>29</td>
33             </tr>
34             <tr>
35                 <td>4</td>
36                 <td>李XX</td>
37                 <td>24</td>
38             </tr>
39             <tr>
40                 <td>5</td>
41                 <td>马小关</td>
42                 <td>35</td>
43             </tr>
44             <tr>
45                 <td>6</td>
46                 <td>AppleX</td>
47                 <td>27</td>
48             </tr>
49         </tbody>
50         </table>
51     </body>
52     <script type="text/javascript">
53         window.onload = function(){
54             var oTab = document.getElementById("tab1");
55             var oTxt = document.getElementById("txt1");
56             var oBtn = document.getElementById("btn1");
57             var oldColor = "";
58
59             changeBackColor();
60
61             oBtn.onclick = function(){
62                 changeBackColor();
63                 for(var i=0;i<oTab.tBodies[0].rows.length;i++){
64                     var oCells = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();　　　　　　　　　　　　　　//把获取到的值都转换成小写或这大写，便于查询
65                     var oTxtVal = oTxt.value.toLowerCase();
66                     //search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。
67                   if(oCells.search(oTxtVal) != -1){
68                       oTab.tBodies[0].rows[i].style.background = "red";
69                   }
70                 }
71             }
72
73             function changeBackColor(){
74                 for(var i=0;i<oTab.tBodies[0].rows.length;i++){
75
76                 oTab.tBodies[0].rows[i].onmouseover=function(){
77                     oldColor = this.style.background;
78                     this.style.background = "yellow";
79                 }
80
81                 oTab.tBodies[0].rows[i].onmouseout=function(){
82                     this.style.background = oldColor;
83                 }
84
85
86                 if(i%2==0){
87                     oTab.tBodies[0].rows[i].style.background = "#ccc";
88                 }else{
89                     oTab.tBodies[0].rows[i].style.background = "";
90                 }
91
92             }
93             }
94
95
96         }
97     </script>
98 </html>

转载于:https://www.cnblogs.com/liuxuanhang/p/7811221.html

09-JS中table模糊查询相关推荐

mysql 电话模糊查询_mysql中的模糊查询
转载自:http://www.letuknowit.com/archives/90/ MySQL中实现模糊查询有2种方式:一是用LIKE/NOT LIKE,二是用REGEXP/NOT REGEXP(或 ...
mysql 通配符转转义_MySQL中的模糊查询和通配符转义
MySQL中实现模糊查询有2种方式:一是用LIKE/NOT LIKE,二是用REGEXP/NOT REGEXP(或RLIKE/NOT RLIKE,它们是同义词). 第一种是标准的SQL模式匹配.它有2 ...
Mybatis中的模糊查询
今天下午做的一个功能,要用到模糊查询,字段是description,刚开始我的写法用的是sql中的模糊查询语句, 但是这个有问题,只有将字段的全部值传入其中,才能查询,所以不是迷糊查询. 后来经 ...
如何在Java中写模糊查询
转载自:https://blog.csdn.net/gradonisis/article/details/105323751 如何在Java中写模糊查询模糊查询是什么? 数据库中查询: Java中查 ...
Excel中实现模糊查询-LOOKUP+FIND函数
Excel中实现模糊查询-LOOKUP+FIND函数 LOOKUP函数函数简介函数使用方法 FIND函数函数简介函数语法示例 LOOKUP函数函数简介 LOOKUP函数是Excel中的 ...
Layui框架下：JS中根据后台查询到的数据动态往div中ul里面动态添加li
Layui框架下:JS中根据后台查询到的数据动态往div中ul里面动态添加li 先建立好一个div和ul JS代码: $(function () { layui.admin.req({ url: _s ...
js前端实现模糊查询
对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...
html搜索框模糊搜索,前端js模糊搜索（模糊查询）
1.html结构: /*查询结果放ul里面*/ 2.css样式: #searchShop { line-height: 28px; text-indent: 5px; width: 180px; fl ...
SQL中的模糊查询like
首先我们创建一个Person表. create table Person(cname varchar2(50),cage number(3) ); 插入一些数据: insert into Person ...

09-JS中table模糊查询

JS中table模糊查询

09-JS中table模糊查询相关推荐

最新文章

热门文章