jQuery DOM操做 實現本地表格查詢

     ctrl+F

     在大量數據的頁面上，咱們最經常使用尋找資源的方式就是「Ctrl+F」，這樣能夠節省好多時間、精力。而jQuery對DOM操做，也能夠達到這樣的效果；若是有一張表格，裏面有上百條數據，你怎樣更加精確地獲取本身想要的數據呢？下面就讓我來給你好好地分析分析！

      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 可用第一個tr id值 #thead替換
        $('table tr:not(":first")').hide().filter(':contains("'+text+'")').show();
    });
});

        說明

        一、得到「button」節點的點擊事件，由於只能點擊咱們才能提交數據；

        二、得到「text」文本框內容的數據

        三、得到「tr」節點，首先將所有的表格隱藏hide()，not(":first")第一行的表頭必須顯示出來，filter()過濾出內容:contains()爲「text」文本框內容的一行，再顯示出來；這樣二行就實現了一個經典的查詢表格功能。