javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能的具體代碼，供大家參考，具體內(nèi)容如下
<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>New Web Project</title> <style> table{ width: 500px; } td{ border:1px solid #ccc; padding:5px; } </style> <script> window.οnlοad=function(){ var oTb=document.getElementById(’tb’); var oldColor=null; var tName=document.getElementById(’name’); var oBtn=document.getElementById(’btn’); oBtn.οnclick=function(){ var aRows=oTb.tBodies[0].rows; for(var i=0;i<aRows.length;i++) { var tdValue=aRows[i].cells[1].innerHTML.toLowerCase(); var tNameValue=tName.value.toLowerCase().split(’ ’); for(var j=0;j<tNameValue.length;j++) { if(tdValue.search(tNameValue[j])>=0) { aRows[i].style.background=’green’; break; } else{ aRows[i].style.background=’’; } } } }; }; </script> </head> <body> 姓名：<input id=’name’ type='text'/> <input type='button' value='搜索' /> <table id='tb'> <thead> <tr> <td>ID</td> <td>姓名</td> <td>年齡</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>23</td> </tr> <tr> <td>2</td> <td>李四</td> <td>26</td> </tr> <tr> <td>3</td> <td>王五</td> <td>29</td> </tr> <tr> <td>4</td> <td>青天決</td> <td>28</td> </tr> <tr> <td>5</td> <td>趙少邦</td> <td>23</td> </tr> </tbody> </table> </body></html>
注意事項(xiàng)：
A.search(B)可以在A中搜索B的位置，返回B出現(xiàn)的位置A.split(B)將A以B劃分為幾部分，并返回?cái)?shù)組，相當(dāng)于分詞操作
運(yùn)行結(jié)果如下：
更多搜索功能實(shí)現(xiàn)的精彩文章，請(qǐng)點(diǎn)擊專題：javascript搜索功能匯總 進(jìn)行學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Python爬蟲(chóng):Request Payload和Form Data的簡(jiǎn)單區(qū)別說(shuō)明2. python統(tǒng)計(jì)函數(shù)庫(kù)scipy.stats的用法解析3. 開(kāi)發(fā)效率翻倍的Web API使用技巧4. WebSocket使用以及在vue如何使用問(wèn)題5. python matplotlib模塊基本圖形繪制方法小結(jié)【直線，曲線，直方圖，餅圖等】6. python argparse模塊通過(guò)后臺(tái)傳遞參數(shù)實(shí)例7. PHP設(shè)計(jì)模式之迭代器模式淺析8. python 視頻下載神器(you-get)的具體使用9. python 常用的異步框架匯總整理10. Python實(shí)現(xiàn)FTP文件定時(shí)自動(dòng)下載的步驟
網(wǎng)公網(wǎng)安備