这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现表格筛选功能的代码。具有一定的参考价值,下面跟着小编一起来看下吧
本应用就两个主要实现:
1. 表格的 id 和 class 之间的命名关系
请看图: 将组名和个人信息联表格联系起来,这样会很好的操作表格
html 代码:
- <tr class="parent" id="row_01">
- <td colspan="3">
- 前台设计组
- </td>
- </tr>
- <tr class="child_row_01">
- <td>
- 张三
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_01">
- <td>
- 李四
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_01">
- <td>
- 胡歌
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="parent" id="row_02">
- <td colspan="3">
- 前台开发组
- </td>
- </tr>
- <tr class="child_row_02">
- <td>
- 李三
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_02">
- <td>
- 张无忌
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_02">
- <td>
- 孔子
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
2. 就是筛选功能的使用:使用 filter 联合 contains 将输入框的字加入 contains 进行筛选
javascript 代码:
- //设置列表查询
- $("#filterName").keyup(function () {
- $("table tbody tr").stop().hide() //将tbody中的tr都隐藏
- .filter(":contains('"+($(this).val())+"')").show(); //,将符合条件的筛选出来
- });
下面是完整代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 表格应用
- </title>
- <style>
- *{ margin: 0; padding: 0; } .box{ border: 1px solid #000; margin:50px
- auto; width: 340px; padding: 10px 10px; } .box table{ margin: auto; } .box
- .box-top{ width: 303px; margin: 5px auto; } .box table tr td,th{ padding:
- 5px 30px; text-align: center; } .box table .parent{ background: lightgray;
- } .selected{ background: gray !important; } .selectHeight{ background:
- darkseagreen !important; }
- </style>
- </head>
- <body>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
- </script>
- <script>
- $(function() {
- //默认让王五选中
- $("tr:contains('王五')").addClass("selectHeight")
- //点击让其展示出列表 默认让其都隐藏
- $(".box tr.parent").click(function() {
- $(this).toggleClass("selected").siblings(".child_" + this.id).stop().toggle();
- }).click(); //此行代码表示要立即执行
- //设置列表查询
- $("#filterName").keyup(function() {
- $("table tbody tr").stop().hide() //将tbody中的tr都隐藏
- .filter(":contains('" + ($(this).val()) + "')").show(); //,将符合条件的筛选出来
- });
- });
- </script>
- <div class="box">
- <div class="box-top">
- <span>
- 筛选:
- </span>
- <input type="text" id="filterName">
- </div>
- <table>
- <thead>
- <tr>
- <th>
- 姓名
- </th>
- <th>
- 性别
- </th>
- <th>
- 暂住地
- </th>
- </tr>
- </thead>
- <tbody>
- <tr class="parent" id="row_01">
- <td colspan="3">
- 前台设计组
- </td>
- </tr>
- <tr class="child_row_01">
- <td>
- 张三
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_01">
- <td>
- 李四
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_01">
- <td>
- 胡歌
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="parent" id="row_02">
- <td colspan="3">
- 前台开发组
- </td>
- </tr>
- <tr class="child_row_02">
- <td>
- 李三
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_02">
- <td>
- 张无忌
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_02">
- <td>
- 孔子
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="parent" id="row_03">
- <td colspan="3">
- 后台设计组
- </td>
- </tr>
- <tr class="child_row_03">
- <td>
- 王五
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_03">
- <td>
- 单志永
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- <tr class="child_row_03">
- <td>
- 刘粒粒
- </td>
- <td>
- 男
- </td>
- <td>
- 浙江宁波
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0709/328395.html