javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能
更新時(shí)間：2020年03月26日 11:33:25 作者：青天訣
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)簡(jiǎ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>
注意事項(xiàng)：
A.search(B)可以在A中搜索B的位置，返回B出現(xiàn)的位置
A.split(B)將A以B劃分為幾部分，并返回?cái)?shù)組，相當(dāng)于分詞操作
運(yùn)行結(jié)果如下：
更多搜索功能實(shí)現(xiàn)的精彩文章，請(qǐng)點(diǎn)擊專題：javascript搜索功能匯總 進(jìn)行學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
- js仿QQ郵箱收件人選擇與搜索功能
- vuejs通過filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)
- JS百度地圖搜索懸浮窗功能
- Ajax+Servlet+jsp顯示搜索效果
- 基于Vue.js實(shí)現(xiàn)簡(jiǎn)單搜索框
- js實(shí)現(xiàn)帶搜索功能的下拉框?qū)崟r(shí)搜索實(shí)時(shí)匹配
- JS仿百度搜索自動(dòng)提示框匹配查詢功能
- js實(shí)現(xiàn)搜索框關(guān)鍵字智能匹配代碼
- JavaScript實(shí)現(xiàn)前端實(shí)時(shí)搜索功能
相關(guān)文章
JS實(shí)現(xiàn)常用導(dǎo)航鼠標(biāo)下經(jīng)過下方橫線自動(dòng)跟隨效果
這篇文章主要介紹了JS寫常用導(dǎo)航鼠標(biāo)下經(jīng)過下方橫線自動(dòng)跟隨效果，文中還給大家講解了基于css?+?js?實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)效果,需要的朋友可以參考下2023-01-01
用javascript獲取當(dāng)頁面上鼠標(biāo)光標(biāo)位置和觸發(fā)事件的對(duì)象的代碼
用 javascript 獲取當(dāng)頁面上鼠標(biāo)（光標(biāo)）位置 和 觸發(fā)事件的對(duì)象 的方法2009-12-12
教學(xué)演示-UBB,剪貼板,textRange及其他
教學(xué)演示-UBB,剪貼板,textRange及其他...2006-07-07
第一次提交可以，第二次提交就沒有任何響應(yīng)了。需要重新加載頁面后才可以提交，而這個(gè)問題在Firefox,IE下沒有出現(xiàn)。2011-05-05
javascript學(xué)習(xí)小結(jié)之prototype
本系列博文主要談一些在 javascript 使用中經(jīng)常會(huì)混淆的高級(jí)應(yīng)用，包括: prototype, closure, scope, this關(guān)鍵字. 對(duì)于一個(gè)需要提高自己javascript水平的程序員,這些都是必須要掌握的，本節(jié)主要介紹prototype.2015-12-12
這篇文章主要介紹了iframe里的頁面禁止右鍵事件的方法,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript封裝彈框插件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)，基于html5?Canvas，是一個(gè)純Javascript圖表庫，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart繪制立體的柱狀圖，感興趣的可以學(xué)習(xí)一下2022-03-03
javascript實(shí)現(xiàn)在某個(gè)元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)在某個(gè)元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript事件處理程序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09