javascript實現(xiàn)簡單搜索功能
更新時間：2020年03月26日 11:33:25 作者：青天訣
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)簡單搜索功能的具體代碼，供大家參考，具體內(nèi)容如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
table{
width: 500px;
}
td{
border:1px solid #ccc;
padding:5px;
}
</style>
<script>
window.οnlοad=function(){
var oTb=document.getElementById('tb');
var oldColor=null;
var tName=document.getElementById('name');
var oBtn=document.getElementById('btn');
oBtn.οnclick=function(){
var aRows=oTb.tBodies[0].rows;
for(var i=0;i<aRows.length;i++)
{
var tdValue=aRows[i].cells[1].innerHTML.toLowerCase();
var tNameValue=tName.value.toLowerCase().split(' ');
for(var j=0;j<tNameValue.length;j++)
{
if(tdValue.search(tNameValue[j])>=0)
{
aRows[i].style.background='green';
break;
}
else{
aRows[i].style.background='';
}
}
}
};
};
</script>
</head>
<body>
姓名：<input id='name' type="text"/>
<input id="btn" type="button" value="搜索" />
<table id="tb">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>青天決</td>
<td>28</td>
</tr>
<tr>
<td>5</td>
<td>趙少邦</td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
</html>
注意事項：
A.search(B)可以在A中搜索B的位置，返回B出現(xiàn)的位置
A.split(B)將A以B劃分為幾部分，并返回數(shù)組，相當于分詞操作
運行結(jié)果如下：
更多搜索功能實現(xiàn)的精彩文章，請點擊專題：javascript搜索功能匯總 進行學習
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)常用導航鼠標下經(jīng)過下方橫線自動跟隨效果
這篇文章主要介紹了JS寫常用導航鼠標下經(jīng)過下方橫線自動跟隨效果，文中還給大家講解了基于css?+?js?實現(xiàn)導航欄下劃線跟隨鼠標滑動效果,需要的朋友可以參考下2023-01-01
用javascript獲取當頁面上鼠標光標位置和觸發(fā)事件的對象的代碼
用 javascript 獲取當頁面上鼠標（光標）位置 和 觸發(fā)事件的對象 的方法2009-12-12
教學演示-UBB,剪貼板,textRange及其他...2006-07-07
第一次提交可以，第二次提交就沒有任何響應了。需要重新加載頁面后才可以提交，而這個問題在Firefox,IE下沒有出現(xiàn)。2011-05-05
本系列博文主要談一些在 javascript 使用中經(jīng)常會混淆的高級應用，包括: prototype, closure, scope, this關(guān)鍵字. 對于一個需要提高自己javascript水平的程序員,這些都是必須要掌握的，本節(jié)主要介紹prototype.2015-12-12
這篇文章主要介紹了iframe里的頁面禁止右鍵事件的方法,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了JavaScript封裝彈框插件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團隊，基于html5?Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart繪制立體的柱狀圖，感興趣的可以學習一下2022-03-03
javascript實現(xiàn)在某個元素上阻止鼠標右鍵事件的方法和實例
這篇文章主要介紹了javascript實現(xiàn)在某個元素上阻止鼠標右鍵事件的方法和實例,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細介紹了JavaScript事件處理程序的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09