- 1、本文档共2页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
对于表格来说, 当数据比较多的时候, 我们无法一页一页的查找, 这样我们就可以进行
筛选操作,这篇文章主要为大家详细介绍了基于 jquery 实现表格内容筛选功能的相关资料,
具有一定的参考价值,感兴趣的小伙伴们可以参考一下
当表格内的数据较多时, 我们无法一页一页的查找, 这时可以通过一个搜索框来实现搜
索。
对于这个搜素框, 我们为了更好的体验可以利用 keyup 事件实现在用户输入的时候就开
始筛选,而不是填完以后点击搜索按钮再执行。
效果图:
实现代码:
<html>
<head>
<meta charset="utf-8" />
<script src="jquery-1.3.2.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
$("tr.parent").click(function () {
$(this)
.siblings('.child_'+this.id).toggle();
});
$("tr.parent").addClass("selected");
$("#searchbox").keyup(function () {
$("table tbody tr").hide()
.filter(":contains('"+($(this).val())+"')").show();//filter 和 contains 共同来实
现了这个功能。
}).keyup();
});
</script>
<title></title>
</head>
<body>
<label> 筛选 </label>
<input type="text" id="searchbox"/>
<table>
<thead>
<tr><td> 姓名 </td><td> 性别 </td><td> 暂
住地 </td></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td> 前 台 设 计 组
</td></tr>
<tr class="child_row_01"><td> 张 山 </td><td> 男
</td><td> 湖北 </td></tr>
<tr class="child_row_01"><td> 李
您可能关注的文档
- 在全市民政工作半年总结会议上的讲话.pdf
- 在全市民营经济发展工作会上的讲话.pdf
- 在全市煤炭资源整合和有偿使用会上的讲话.pdf
- 在全盟防控高致病性工作会议上的讲话.pdf
- 在全镇农村各费征收动员会议上的讲话.pdf
- 在公司员工艺术团成立大会上的讲话.pdf
- 在共青团工作中实践科学发展观.pdf
- 在共青团市二届二次全委扩大会议上的工作报告.pdf
- 在军训中体会成长的快乐.pdf
- 在初三中考百日冲刺誓师大会上的讲话.pdf
- 2024年山东省聊城东阿县事业单位选聘32人历年高频考题难、易错点模拟试题(共500题)附带答案详解.docx
- 2024年山东省聊城莘县事业单位招聘单位高频考题难、易错点模拟试题(共500题)附带答案详解.docx
- 汽机专业题库及解析.docx
- 基本常规医疗流程答案.doc
- 大金空调故障代码汇总.docx
- 理综-山西省阳泉市2023-2024学年高三年级上学期期末考试试题和答案.docx
- 数学-海南省天一大联考2023-2024学年高三学业水平诊断(二)带答案.docx
- 地理-湖南省长沙市雅礼中学2023-2024学年高三上学期月考试卷带答案.docx
- 生物-湖南省长沙市雅礼中学2023-2024学年高三上学期月考试卷带答案.docx
- 数学-湖南省长沙市雅礼中学2023-2024学年高三上学期月考试卷带答案.docx
文档评论(0)