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方法。