js實現前端動態篩選表格內容

代碼參考：

http://www.sharejs.com/codes/javascript/4289

http://www.jb51.net/article/103420.htm

https://www.zhihu.com/question/21652436/answer/18899099

1、無延遲版本

// 重寫contains方法，使其篩選時忽略大小寫，可以放在頁面中，也可放在全局。
jQuery.expr[':'].contains = function (a, i, m) {
    return jQuery(a).text().toUpperCase()
        .indexOf(m[3].toUpperCase()) >= 0;
};

$("#searchBox").keyup(function () {
    $("table tbody tr").stop().hide() //將tbody中的tr都隱藏
     .filter(":contains('"+($(this).val())+"')").show(); //，將符合條件的篩選出來
});

本例執行效率很高，同樣適用div表格，將&("table tbody tr")適當調整即可。

2、略延遲版本

var k,
tFilter=function(value){// 表格內容篩選
    // search code
    $("table tbody tr").stop().hide();// 將tbody中的tr都隱藏
    //.filter(":contains('" + (value) + "')").show(); //將符合條件的篩選出來
    $("table tbody tr").filter(":contains('" + (value) + "')").show();
};
document.getElementById('searchBox').onkeydown=function(){// 輸入觸發
    var self=this;
    clearTimeout(k);
    k=setTimeout(function(){
        console.log(k);
        tFilter(self.value);
    },400);
};
// 如需忽略大小寫，可添加1中的contains方法。