JS搜素表格
用JS實現在表格內搜素名字。
基本版：完全匹配
思路：在表格里搜素每一行，把用戶輸入的值和所有名字做出對比，完全匹配后高亮顯示。
1、獲取元素。
2、for循環歷遍表格，把用戶輸入的值和所有名字對比，如果相等就高亮顯示該行。oTable.tBodies[0].rows[i].cells[0].innerHTML==oTxt.value
JS代碼：
1 <script>
2 window.onload=function()
3 {
4 var oTxt=document.getElementById('txt');
5 var oSearch=document.getElementById('search');
6 var oTable=document.getElementById('table');
7
8 oSearch.onclick=function()
9 {
10 for(var i=0;i<oTable.tBodies[0].rows.length;i++)
11 {
12 if(oTable.tBodies[0].rows[i].cells[0].innerHTML==oTxt.value)
13 {
14 oTable.tBodies[0].rows[i].style.background='yellow';
15 }
16 else
17 {
18 oTable.tBodies[0].rows[i].style.background='';
19 }
20 };
21 };
22 };
23 </script>
加強版：忽略大小寫
思路：在表格里搜素每一行，把用戶輸入的值和所有名字做出對比，完全匹配后高亮顯示。
1、獲取元素。
2、for循環歷遍表格，把用戶輸入的值和所有名字對比，把用戶輸入的值和表格的值都強制轉換為小寫或者大寫，只要轉換為兩種類型一樣就能實現忽略大小寫，如果相等就高亮顯示該行。oTable.tBodies[0].rows[i].cells[0].innerHTML.toLowerCase==oTxt.value.toLowerCase
轉換為小寫：toLowerCase() 轉換為大寫:toUpperCase()
JS代碼：
1 window.onload=function()
2 {
3 var oTxt=document.getElementById('txt');
4 var oSearch=document.getElementById('search');
5 var oTable=document.getElementById('table');
6
7 oSearch.onclick=function()
8 {
9 for(var i=0;i<oTable.tBodies[0].rows.length;i++)
10 {
11 sTab=oTable.tBodies[0].rows[i].cells[0].innerHTML;
12 sTxt=oTxt.value;
13 if(sTab.toUpperCase()==sTxt.toUpperCase())
14 {
15 oTable.tBodies[0].rows[i].style.background='yellow';
16 }
17 else
18 {
19 oTable.tBodies[0].rows[i].style.background='';
20 }
21 };
22 };
23
24 };
25 </script>
加強版：模糊搜索
search用于查找并返回字符串的位置，如果沒有找到該字符串就等于-1，現在只要判斷表格里面名字和用戶輸入的值不等于-1，就說明用戶輸入的值和表格的名字的某部分是匹配的。這樣就能實現模糊搜索。
JS代碼：
<script>
window.onload=function()
{
var oTxt=document.getElementById('txt');
var oSearch=document.getElementById('search');
var oTable=document.getElementById('table');
oSearch.onclick=function()
{
for(var i=0;i<oTable.tBodies[0].rows.length;i++)
{
sTab=oTable.tBodies[0].rows[i].cells[0].innerHTML.toLowerCase();
sTxt=oTxt.value.toLowerCase();
if(sTab.search(sTxt)!=-1)
{
oTable.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTable.tBodies[0].rows[i].style.background='';
}
};
};
};
</script>
加強版：多關鍵字
split用來分隔字符，用split使用空格把用戶輸入的值分隔開并賦值給數組，for循環歷遍數組里面的元素，判斷表格里的元素和和數組里的元素是否有，有就高亮顯示。
JS代碼：
1 <script>
2 window.onload=function()
3 {
4 var oTxt=document.getElementById('txt');
5 var oSearch=document.getElementById('search');
6 var oTable=document.getElementById('table');
7
8 oSearch.onclick=function()
9 {
10 for(var i=0;i<oTable.tBodies[0].rows.length;i++)
11 {
12 sTab=oTable.tBodies[0].rows[i].cells[0].innerHTML.toLowerCase(); //忽略大小寫
13 sTxt=oTxt.value.toLowerCase();
14 var arr=sTxt.split(' '); //多關鍵字，用空格分隔用戶輸入的值并賦值給數組
15
16 oTable.tBodies[0].rows[i].style.background='';
17
18 for(var j=0;j<arr.length;j++) //歷遍數組
19 {
20 if(sTab.search(arr[j])!=-1) //表格里的值和用戶輸入的值不等于-1，就是有部分相等
21 {
22 oTable.tBodies[0].rows[i].style.background='yellow'; //把改行背景顏色改為黃色
23 }
24 }
25 };
26 };
27
28 };
29 </script>
最終版代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 {
9 var oTxt=document.getElementById('txt');
10 var oSearch=document.getElementById('search');
11 var oTable=document.getElementById('table');
12
13 oSearch.onclick=function()
14 {
15 for(var i=0;i<oTable.tBodies[0].rows.length;i++)
16 {
17 sTab=oTable.tBodies[0].rows[i].cells[0].innerHTML.toLowerCase(); //忽略大小寫
18 sTxt=oTxt.value.toLowerCase();
19 var arr=sTxt.split(' '); //多關鍵字，用空格分隔用戶輸入的值并賦值給數組
20
21 oTable.tBodies[0].rows[i].style.background='';
22
23 for(var j=0;j<arr.length;j++) //歷遍數組
24 {
25 if(sTab.search(arr[j])!=-1) //表格里的值和用戶輸入的值不等于-1，就是有部分相等
26 {
27 oTable.tBodies[0].rows[i].style.background='yellow'; //把改行背景顏色改為黃色
28 }
29 }
30 };
31 };
32
33 };
34 </script>
35 </head>
36
37 <body>
38 <input type="txt" id="txt" />
39 <input type="button" id="search" value="搜索" />
40 <table border="1" cellspacing="0" cellpadding="0" width="100%" id="table">
41 <thead>
42 <tr>
43 <td>姓名</td>
44 <td>學號</td>
45 <td>專業</td>
46 </tr>
47 </thead>
48 <tbody>
49 <tr>
50 <td>Simon</td>
51 <td>1</td>
52 <td>A</td>
53 </tr>
54 <tr>
55 <td>Melon</td>
56 <td>2</td>
57 <td>A</td>
58 </tr>
59 <tr>
60 <td>張三</td>
61 <td>3</td>
62 <td>A</td>
63 </tr>
64 <tr>
65 <td>李四</td>
66 <td>4</td>
67 <td>A</td>
68 </tr>
69 <tr>
70 <td>王五</td>
71 <td>5</td>
72 <td>A</td>
73 </tr>
74 <tr>
75 <td>劉三</td>
76 <td>6</td>
77 <td>A</td>
78 </tr>
79 </tbody>
80 </table>
81 </body>
82 </html>
總結
- 上一篇： python 科比投篮数据可视化及简单分
- 下一篇： 如何在 iPhone、iPad 和 Ap