废话不多说了,直接给大家贴关键代码了。具体代码如下所示:
表格内容的筛选table {
width: 50%;
border: 1px solid;
background-color: #8FBC8F;
}
thead tr th {
text-align: left;
border-bottom: 1px solid;
}
$(function() {
$('#filterName').keyup(function(){
$('table tbody tr').hide()
.filter(":contains('" +($(this).val()) + "')").show();
}).keyup();//DOM加载完时,绑定事件完成之后立即触发
});
筛选
姓名性别暂住地
张三男浙江宁波李四女浙江杭州王五男湖南长沙赵六男浙江温州Rain男浙江杭州MAXMAN女浙江杭州张八男浙江宁波李逵女浙江杭州王进男湖南长沙赵凯男浙江温州Rick男浙江杭州Micle女浙江杭州效果图:
输入前:
输入后:
以上所述是小编给大家介绍的基于jQuery实现表格内容的筛选功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持!