今天給大家介紹一個(gè)多糠,如何用js做出表格檢索累舷。
我們的檢索一般分為幾大類(lèi),有:
字符串比較夹孔、不區(qū)分大小寫(xiě)被盈、模糊搜索(search)以及多關(guān)鍵詞搜索(split)
1.簡(jiǎn)單的字符串比較:
我們只需要獲取表格中的信息和文本框的內(nèi)容作比較,若相等即顯示出來(lái)搭伤。
2.不區(qū)分大小寫(xiě)
我們需要把我們要檢索的內(nèi)容和表格中的信息進(jìn)行小寫(xiě)化操作只怎,即toLowerCase(),再將其比較。
3.模糊搜索
模糊搜索需要用到search()操作怜俐,即我們不需要把內(nèi)容全都輸入進(jìn)去身堡,只需要輸入內(nèi)容中的某一個(gè)字或者字母,即可將我們需要的內(nèi)容在表格中查找出來(lái)拍鲤。
4.多關(guān)鍵詞搜索
我們可以同時(shí)輸入不同內(nèi)容贴谎,然后用空格隔開(kāi)汞扎,通過(guò)split(‘ ’)將其轉(zhuǎn)換成字符串,再通過(guò)search將其一一搜索出來(lái)擅这。
最后附上代碼:
<script type="text/javascript">
window.onload=function(){
var oTa=document.getElementById('tal');
var oBtn=document.getElementById('btn')
var oName=document.getElementById('name');
oBtn.onclick=function(){
for(var i=0; i<oTa.tBodies[0].rows.length;i++){
var aStr=oTa.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); //不分大小寫(xiě)搜索
var aVal=oName.value.toLowerCase();
var arr=aVal.split(' ');
oTa.tBodies[0].rows[i].style.background='';
for(var j=0;j<arr.length;j++){
if(aStr.search(arr[j])!=-1){
oTa.tBodies[0].rows[i].style.background='yellow';
}
}
}
}
}
</script>
如有錯(cuò)誤澈魄,麻煩指正。謝謝