jQuery DOM操作 實(shí)現(xiàn)本地表格查詢

     ctrl+F

     在大量數(shù)據(jù)的頁(yè)面上，我們最常用尋找資源的方式就是“Ctrl+F”，這樣可以節(jié)省好多時(shí)間、精力。而jQuery對(duì)DOM操作，也可以達(dá)到這樣的效果；如果有一張表格，里面有上百條數(shù)據(jù)，你怎樣更加精確地獲取自己想要的數(shù)據(jù)呢？下面就讓我來給你好好地分析分析！

      code

      一張表格

    <table>    
        <tr id="thead">
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</td>
        </tr>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>21</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>小文</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>阿七</td>
            <td>保密</td>
            <td>30</td>
        </tr>
    </table>
    <div>
	<input type="text" id="text" value=""/>
        <input type="button" id="button" value="查詢"/>
    </div>

        jQuery操作

$(function(){
    $('#button').bind('click',function(){
        var text = $('#text').val();
        //:first 可用第一個(gè)tr id值 #thead替換
        $('table tr:not(":first")').hide().filter(':contains("'+text+'")').show();
    });
});

        說明

        1、獲得“button”節(jié)點(diǎn)的點(diǎn)擊事件，因?yàn)橹荒茳c(diǎn)擊我們才能提交數(shù)據(jù)；

        2、獲得“text”文本框內(nèi)容的數(shù)據(jù)

        3、獲得“tr”節(jié)點(diǎn)，首先將全部的表格隱藏hide()，not(":first")第一行的表頭必須顯示出來，filter()過濾出內(nèi)容:contains()為“text”文本框內(nèi)容的一行，再顯示出來；這樣二行就實(shí)現(xiàn)了一個(gè)經(jīng)典的查詢表格功能。