這篇文章主要介紹了JS實現(xiàn)表格數(shù)據(jù)各種搜索功能的方法,可實現(xiàn)忽略大小寫,模糊搜索,多關(guān)鍵搜索等功能,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)表格數(shù)據(jù)各種搜索功能?？珊雎源笮?模糊搜索,多關(guān)鍵搜索。分享給大家供大家參考。具體實現(xiàn)方法如下：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oTab=document.getElementById("tab");
var oBt=document.getElementsByTagName("input");
oBt[1].onclick=function(){
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var str1=oTab.tBodies[0].rows[i].cells[1].innerHTML.toUpperCase();
var str2=oBt[0].value.toUpperCase();
//使用string.toUpperCase()(將字符串中的字符全部轉(zhuǎn)換成大寫)或string.toLowerCase()(將字符串中的字符全部轉(zhuǎn)換成小寫)
//所謂忽略大小寫的搜索就是將用戶輸入的字符串全部轉(zhuǎn)換大寫或小寫，然后把信息表中的字符串的全部轉(zhuǎn)換成大寫或小寫，最后再去比較兩者轉(zhuǎn)換后的字符就行了
/*******************************JS實現(xiàn)表格忽略大小寫搜索*********************************/
if(str1==str2){
oTab.tBodies[0].rows[i].style.background='red';
}
else{
oTab.tBodies[0].rows[i].style.background='';
}
/***********************************JS實現(xiàn)表格的模糊搜索*************************************/
//表格的模糊搜索的就是通過JS中的一個search()方法，使用格式，string1.search(string2);如果
//用戶輸入的字符串是其一個子串，就會返回該子串在主串的位置，不匹配則會返回-1，故操作如下
if(str1.search(str2)!=-1){oTab.tBodies[0].rows[i].style.background='red';}
else{oTab.tBodies[0].rows[i].style.background='';}
/***********************************JS實現(xiàn)表格的多關(guān)鍵字搜索********************************/
//表格的多關(guān)鍵字搜索，加入用戶所輸入的多個關(guān)鍵字之間用空格隔開，就用split方法把一個長字符串以空格為標準，分成一個字符串數(shù)組，
//然后以一個循環(huán)將切成的數(shù)組的子字符串與信息表中的字符串比較
var arr=str2.split(' ');
for(var j=0;j<arr.length;j++)
{
if(str1.search(arr[j])!=-1){oTab.tBodies[0].rows[i].style.background='red';}
}
}
}
}
</script>
</head>
<body>
姓名:<input type="text" />
<input type="button" value="搜索"/>
<table bordercolor="blue" id="tab">
<thead>
<td><h2>ID</h2></td>
<td><h2>Name</h2></td>
<td><h2>Age</h2></td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>Mikyou</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>weak</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>sky</td>
<td>35</td>
</tr>
<tr>
<td>5</td>
<td>李四</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。