基于jquery实现表格内容筛选功能实例解析.pdf

基于jquery实现表格内容筛选功能实例解析.pdf

  1. 1、本文档共2页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
对于表格来说, 当数据比较多的时候, 我们无法一页一页的查找, 这样我们就可以进行 筛选操作,这篇文章主要为大家详细介绍了基于 jquery 实现表格内容筛选功能的相关资料, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下 当表格内的数据较多时, 我们无法一页一页的查找, 这时可以通过一个搜索框来实现搜 索。 对于这个搜素框, 我们为了更好的体验可以利用 keyup 事件实现在用户输入的时候就开 始筛选,而不是填完以后点击搜索按钮再执行。 效果图: 实现代码: <html> <head> &nbsp;<meta charset="utf-8" /> &nbsp;<script src="jquery-1.3.2.min.js"></script> &nbsp;<link href="css/style.css" rel="stylesheet" type="text/css" /> &nbsp;<script> &nbsp; $(function () { &nbsp; &nbsp;$("tr.parent").click(function () { &nbsp; &nbsp; $(this) &nbsp; &nbsp; .siblings('.child_'+this.id).toggle(); &nbsp; &nbsp;}); &nbsp; &nbsp;$("tr.parent").addClass("selected"); &nbsp; &nbsp;$("#searchbox").keyup(function () { &nbsp; &nbsp; $("table tbody tr").hide() &nbsp; &nbsp; .filter(":contains('"+($(this).val())+"')").show();//filter 和 contains 共同来实 现了这个功能。 &nbsp; &nbsp;}).keyup(); &nbsp; }); &nbsp;</script> &nbsp;<title></title> </head> <body> &nbsp;<label> 筛选 </label> &nbsp;<input type="text" id="searchbox"/> &nbsp;<table> &nbsp; <thead> &nbsp; &nbsp;<tr><td> 姓名 </td><td> 性别 </td><td> 暂 住地 </td></tr> &nbsp; </thead> &nbsp; <tbody> &nbsp; &nbsp;<tr class="parent" id="row_01"><td> 前 台 设 计 组 </td></tr> &nbsp; &nbsp;<tr class="child_row_01"><td> 张 山 </td><td> 男 </td><td> 湖北 </td></tr> &nbsp; &nbsp;<tr class="child_row_01"><td> 李

文档评论(0)

lyf66300 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

版权声明书
用户编号:8020140062000006

1亿VIP精品文档

相关文档