javascript實現簡單搜尋功能
阿新 • • 發佈：2020-03-29
本文例項為大家分享了javascript實現簡單搜尋功能的具體程式碼，供大家參考，具體內容如下
<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出現的位置
A.split(B)將A以B劃分為幾部分，並返回陣列，相當於分詞操作
執行結果如下：
更多搜尋功能實現的精彩文章，請點選專題：javascript搜尋功能彙總進行學習
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。