萬盛學電腦網 >> 腳本專題 >> javascript >> JS實現表格數據各種搜索功能的方法
JS實現表格數據各種搜索功能的方法
這篇文章主要介紹了JS實現表格數據各種搜索功能的方法,可實現忽略大小寫,模糊搜索,多關鍵搜索等功能,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現表格數據各種搜索功能。可忽略大小寫,模糊搜索,多關鍵搜索。分享給大家供大家參考。具體實現方法如下：
代碼如下: <!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()(將字符串中的字符全部轉換成大寫)或string.toLowerCase()(將字符串中的字符全部轉換成小寫)
//所謂忽略大小寫的搜索就是將用戶輸入的字符串全部轉換大寫或小寫，然後把信息表中的字符串的全部轉換成大寫或小寫，最後再去比較兩者轉換後的字符就行了
/*******************************JS實現表格忽略大小寫搜索*********************************/
if(str1==str2){
oTab.tBodies[0].rows[i].style.background='red';
}
else{
oTab.tBodies[0].rows[i].style.background='';
}
/***********************************JS實現表格的模糊搜索*************************************/
//表格的模糊搜索的就是通過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實現表格的多關鍵字搜索********************************/
//表格的多關鍵字搜索，加入用戶所輸入的多個關鍵字之間用空格隔開，就用split方法把一個長字符串以空格為標准，分成一個字符串數組，
//然後以一個循環將切成的數組的子字符串與信息表中的字符串比較
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 border="1" 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程序設計有所幫助。
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved