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è)長字符串以空格為標(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è)長字符串以空格為標(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>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
幾個(gè)javascript操作word的參考代碼，對于具體的調(diào)用代碼，大家可以參考我們的上一篇文章。2009-10-10
JavaScript實(shí)現(xiàn)的浮動(dòng)層框架用法實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的浮動(dòng)層框架用法,以實(shí)例形式分析了JavaScript實(shí)現(xiàn)可關(guān)閉的半透明浮動(dòng)層相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
本文是javascript插件化開發(fā)系列教程的第六篇文章，還是重點(diǎn)對上一篇文章不足的地方進(jìn)行改進(jìn)重構(gòu)，逐步分析讓大家能有一個(gè)新的認(rèn)識(shí)，希望小伙伴們能夠喜歡。2015-02-02
這篇文章主要介紹了JavaScript實(shí)現(xiàn)櫥窗展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了webpack 靜態(tài)資源集中輸出的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
echart簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了echart簡介，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
詳解JS中定時(shí)器setInterval和setTImeout的this指向問題
在js中setTimeout和setInterval都是用來定時(shí)的一個(gè)功能，下面這篇文章主要給介紹了JS中setInterval和setTImeout的this指向問題,文中通過示例介紹的很詳細(xì)，有需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
通過Tabs方法基于easyUI+bootstrap制作工作站
本教程給大家介紹如何制作easyUI+bootstrap工作站，主要學(xué)習(xí)tabs方法，本文介紹非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-03-03
使用JavaScript在html文檔內(nèi)添加新的元素節(jié)點(diǎn)
這篇文章主要介紹了使用JavaScript在html文檔內(nèi)添加新的元素節(jié)，主要打方式就是動(dòng)態(tài)的改變原有html文檔結(jié)構(gòu)，下文詳細(xì)介紹內(nèi)容需要的可以參考一下2022-02-02
本文將詳細(xì)介紹一個(gè)可拖拽列寬表格實(shí)例,需要了解更多的朋友可以參考下2012-11-11