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>
