JS實(shí)現(xiàn)表格數(shù)據(jù)各種搜索功能的方法
更新時(shí)間：2015年03月03日 10:55:19 作者：mikyou
這篇文章主要介紹了JS實(shí)現(xiàn)表格數(shù)據(jù)各種搜索功能的方法,可實(shí)現(xiàn)忽略大小寫,模糊搜索,多關(guān)鍵搜索等功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)表格數(shù)據(jù)各種搜索功能。可忽略大小寫,模糊搜索,多關(guān)鍵搜索。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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實(shí)現(xiàn)表格忽略大小寫搜索*********************************/
if(str1==str2){
oTab.tBodies[0].rows[i].style.background='red';
}
else{
oTab.tBodies[0].rows[i].style.background='';
}
/***********************************JS實(shí)現(xiàn)表格的模糊搜索*************************************/
//表格的模糊搜索的就是通過JS中的一個(gè)search()方法，使用格式，string1.search(string2);如果
//用戶輸入的字符串是其一個(gè)子串，就會(huì)返回該子串在主串的位置，不匹配則會(huì)返回-1，故操作如下
if(str1.search(str2)!=-1){oTab.tBodies[0].rows[i].style.background='red';}
else{oTab.tBodies[0].rows[i].style.background='';}
/***********************************JS實(shí)現(xiàn)表格的多關(guān)鍵字搜索********************************/
//表格的多關(guān)鍵字搜索，加入用戶所輸入的多個(gè)關(guān)鍵字之間用空格隔開，就用split方法把一個(gè)長(zhǎng)字符串以空格為標(biāo)準(zhǔn)，分成一個(gè)字符串?dāng)?shù)組，
//然后以一個(gè)循環(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 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>
<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實(shí)現(xiàn)表格忽略大小寫搜索*********************************/
if(str1==str2){
oTab.tBodies[0].rows[i].style.background='red';
}
else{
oTab.tBodies[0].rows[i].style.background='';
}
/***********************************JS實(shí)現(xiàn)表格的模糊搜索*************************************/
//表格的模糊搜索的就是通過JS中的一個(gè)search()方法，使用格式，string1.search(string2);如果
//用戶輸入的字符串是其一個(gè)子串，就會(huì)返回該子串在主串的位置，不匹配則會(huì)返回-1，故操作如下
if(str1.search(str2)!=-1){oTab.tBodies[0].rows[i].style.background='red';}
else{oTab.tBodies[0].rows[i].style.background='';}
/***********************************JS實(shí)現(xiàn)表格的多關(guān)鍵字搜索********************************/
//表格的多關(guān)鍵字搜索，加入用戶所輸入的多個(gè)關(guān)鍵字之間用空格隔開，就用split方法把一個(gè)長(zhǎng)字符串以空格為標(biāo)準(zhǔn)，分成一個(gè)字符串?dāng)?shù)組，
//然后以一個(gè)循環(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 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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js大數(shù)相加出現(xiàn)精度丟失、運(yùn)算錯(cuò)誤的問題
js中數(shù)字類型長(zhǎng)度達(dá)到16位時(shí),進(jìn)行加減乘除運(yùn)算,會(huì)出現(xiàn)精度丟失,運(yùn)算結(jié)果錯(cuò)誤的問題,本文講述精度丟失的原因及解決辦法2023-08-08
JavaScript MutationObserver實(shí)例講解
MutationObserver用來監(jiān)視DOM變動(dòng)。DOM的任何變動(dòng)，比如節(jié)點(diǎn)增減、屬性的變動(dòng)、文本內(nèi)容的變動(dòng)都會(huì)觸發(fā)MutationObserver事件，它與事件有一個(gè)本質(zhì)不同：事件是同步觸發(fā)，MutationObserver則是異步觸發(fā)，DOM的變動(dòng)并不會(huì)馬上觸發(fā)，而是要等到當(dāng)前所有DOM操作都結(jié)束才觸發(fā)2022-12-12
異步動(dòng)態(tài)加載js與css文件的js代碼
這篇文章介紹了異步動(dòng)態(tài)加載js與css文件的幾種方法，有需要的朋友可以參考一下2013-09-09
在JavaScript中遇到處理錯(cuò)誤很讓人頭疼，這篇文章整理了JavaScript錯(cuò)誤處理實(shí)踐，有需要的小伙伴們可以參考。2016-07-07
javascript實(shí)現(xiàn)PC網(wǎng)頁里的拖拽效果
這篇文章主要介紹了javascript實(shí)現(xiàn)PC網(wǎng)頁里的拖拽效果的相關(guān)資料,需要的朋友可以參考下2016-03-03
國(guó)外JavaScript經(jīng)典封裝集合整理
國(guó)外JavaScript經(jīng)典封裝集合整理...
2007-05-05 
javascript讓setInteval里的函數(shù)參數(shù)中的this指向特定的對(duì)象
話說阿里巴巴今年的校園招聘有一道題目考了一個(gè)知識(shí)點(diǎn),那就是setInterval的參數(shù)函數(shù)里的this指向.
2010-01-01 
獲取JAVASCRIPT時(shí)間戳函數(shù)的5種方法
JavaScript獲得時(shí)間戳的方法有五種,后四種都是通過實(shí)例化時(shí)間對(duì)象new?Date()?來進(jìn)一步獲取當(dāng)前的時(shí)間戳,JavaScript處理時(shí)間主要使用時(shí)間對(duì)象Date,本文對(duì)js時(shí)間戳函數(shù)獲取方法給大家介紹的非常詳細(xì),需要的朋友參考下吧
2024-01-01 
在本篇文章里我們給大家分享了關(guān)于js訪問對(duì)象的屬性和方法的相關(guān)知識(shí)點(diǎn)，有需要的朋友們可以學(xué)習(xí)下。
2018-10-10