如何用js做出一個(gè)表格檢索

今天給大家介紹一個(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ò)誤澈魄,麻煩指正。謝謝

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末仲翎,一起剝皮案震驚了整個(gè)濱河市痹扇,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌溯香,老刑警劉巖鲫构,帶你破解...
    沈念sama閱讀 218,640評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異玫坛,居然都是意外死亡结笨,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)昂秃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)禀梳,“玉大人杜窄,你說(shuō)我怎么就攤上這事肠骆。” “怎么了塞耕?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,011評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵蚀腿,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我扫外,道長(zhǎng)莉钙,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,755評(píng)論 1 294
  • 正文 為了忘掉前任筛谚,我火速辦了婚禮磁玉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘驾讲。我一直安慰自己蚊伞,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布吮铭。 她就那樣靜靜地躺著时迫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谓晌。 梳的紋絲不亂的頭發(fā)上掠拳,一...
    開(kāi)封第一講書(shū)人閱讀 51,610評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音纸肉,去河邊找鬼溺欧。 笑死喊熟,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的胧奔。 我是一名探鬼主播逊移,決...
    沈念sama閱讀 40,352評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼龙填!你這毒婦竟也來(lái)了胳泉?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,257評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤岩遗,失蹤者是張志新(化名)和其女友劉穎扇商,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體宿礁,經(jīng)...
    沈念sama閱讀 45,717評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡案铺,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了梆靖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片控汉。...
    茶點(diǎn)故事閱讀 40,021評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖返吻,靈堂內(nèi)的尸體忽然破棺而出姑子,到底是詐尸還是另有隱情,我是刑警寧澤测僵,帶...
    沈念sama閱讀 35,735評(píng)論 5 346
  • 正文 年R本政府宣布街佑,位于F島的核電站,受9級(jí)特大地震影響捍靠,放射性物質(zhì)發(fā)生泄漏沐旨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評(píng)論 3 330
  • 文/蒙蒙 一榨婆、第九天 我趴在偏房一處隱蔽的房頂上張望磁携。 院中可真熱鬧,春花似錦良风、人聲如沸谊迄。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,936評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至吊档,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鬼贱。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,054評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留这难,地道東北人舟误。 一個(gè)月前我還...
    沈念sama閱讀 48,224評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像姻乓,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蹋岩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • python的re模塊--細(xì)說(shuō)正則表達(dá)式 可能是東半球最詳細(xì)最全面的re教程,翻譯自官方文檔,因?yàn)楣俜轿臋n寫(xiě)的是真...
    立而人閱讀 22,883評(píng)論 4 46
  • 前言 最先接觸編程的知識(shí)是在大學(xué)里面秧骑,大學(xué)里面學(xué)了一些基礎(chǔ)的知識(shí),c語(yǔ)言扣囊,java語(yǔ)言乎折,單片機(jī)的匯編語(yǔ)言等;大學(xué)畢...
    oceanfive閱讀 3,087評(píng)論 0 7
  • 四號(hào)“妮妲”要來(lái)骂澄,周遭盒至、友圈一片備戰(zhàn)聲酗洒,停課停工緩營(yíng)業(yè)枷遂,人性化暖意濃棋嘲,也足見(jiàn)“妮妲”之威攝力酒唉。 她來(lái)之前奏曲沸移,是本...
    又見(jiàn)五月閱讀 180評(píng)論 0 0
  • 2018年3月5日 天氣:多云 心情:沮喪 在從學(xué)校回家的路上雹锣,我隱隱約約地聽(tīng)到了一陣歌聲“都...
    行路難_閱讀 330評(píng)論 0 1
  • 1. 什么是智能指針? 智能指針是行為類(lèi)似于指針的類(lèi)對(duì)象蕊爵,但這種對(duì)象還有其他功能。 2. 為什么設(shè)計(jì)智能指針? 引...
    MinoyJet閱讀 638評(píng)論 0 1