JavaScript搜尋
阿新 • • 發佈：2018-12-27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oTab=document.getElementById('tab1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function () { var i=0; for(i=0;i<oTab.tBodies[0].rows.length;i++) { //Tbodies 獲取所有的tbody //rows 所有的行 //cells 獲取所有的單元格 //toLowerCase轉換大小寫 var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); //表格裡面的第一行 var sValueInTxt=oTxt.value.toLowerCase(); //輸入框裡的. //切割字串 var arr=sValueInTxt.split(' '); var bFound=false; for(var j=0;j<arr.length;j++) { //查詢切割字串有沒有要的東西. //search查詢 //判斷sva裡面有沒有arr相同的 if(sValueInTab.search(arr[j])!=-1) { bFound=true; break; } } if(bFound) { //有 oTab.tBodies[0].rows[i].style.background='yellow'; } else { //沒有 oTab.tBodies[0].rows[i].style.background=''; } } }; }; </script> </head> <body> <input id="txt1" type="text" /> <input id="btn1" type="button" value="搜尋" /> <table id="tab1" border="1" width="400"> <thead> <td>ID</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td></td> </tr> <tr> <td>2</td> <td>Leo</td> <td></td> </tr> <tr> <td>3</td> <td>莫莫</td> <td></td> </tr> <tr> <td>4</td> <td>aaa</td> <td></td> </tr> <tr> <td>5</td> <td>bbb</td> <td></td> </tr> <tr> <td>6</td> <td>ccc</td> <td></td> </tr> </tbody> </table> </body> </html>