前端js过滤表格
2015-11-17 16:14
369 查看
//表格过滤 $scope.filterTableData=function(){ //测试数据 var filterQuerys=$("#itemname").val(); if(filterQuerys==""){ $("#test-table-body").find("table").find("tr").removeAttr('style'); return; } var filterQueryArry=new Array();//每列的宽度 filterQueryArry=filterQuerys.split(","); $("#test-table-body").find("table").find("tr").css('display','none'); for(var i=0;i<filterQueryArry.length;i++){ var filterQuery=filterQueryArry[i]; $("#test-table-body").find("table").find("[class*='"+filterQuery+"']").removeAttr('style'); } } //表格过滤
描述:
不走后台,使用于不分页的。原理表格中的class选择器的find()查询到的显示display。
html代码
<table> <tbody> <tr class=" 硫酸阿托品滴眼液 硫酸阿托品滴眼液 西药" ng-click="selectRow(2);" ng-mouseover="changecolor(2);" ng-mouseout="removeTempData();" id="rownopagetable2" style="display: none;"> <td style="text-align: center;width:26px;"><input type="checkbox" id="bodycheckbox2" /></td> <td style="text-align: center;width:50px;">1</td> <td id="nopagetable2r1" style="text-align: center; width:150px">1</td> <td id="nopagetable2r2" style="text-align: center; width:125px">硫酸阿托品滴眼液</td> <td id="nopagetable2r3" style="text-align: center; width:125px">硫酸阿托品滴眼液</td> <td id="nopagetable2r4" style="text-align: center; width:120px">西药</td> </tr> <tr class=" 茯苓 中药饮片及药材 中草药" ng-click="selectRow(3);" ng-mouseover="changecolor(3);" ng-mouseout="removeTempData();" id="rownopagetable3"> <td style="text-align: center;width:26px;"><input type="checkbox" id="bodycheckbox3" /></td> <td style="text-align: center;width:50px;">2</td> <td id="nopagetable3r1" style="text-align: center; width:150px">2</td> <td id="nopagetable3r2" style="text-align: center; width:125px">茯苓</td> <td id="nopagetable3r3" style="text-align: center; width:125px">中药饮片及药材</td> <td id="nopagetable3r4" style="text-align: center; width:120px">中草药</td> </tr> </tbody> </table>
html代码
相关文章推荐
- hammerjs jquery的选项使用方法,以给swipe设置threshold和velocity为例
- Jquery操作Cookie
- JavaScript----函数的封装、继承和多态
- 理解JS的函数(Function)基础
- GCC 提供的原子操作-__sync_fetch_and_add系列
- 仿淘宝右侧tab栏切换
- js、css文件gzip静态压缩以及gzip动态压缩
- jquery.qrcode生成二维码支持中文
- js获取地址参数(当有中文时不出现乱码)
- css(2)
- spket插件下载安装 jQueryEclipse插件
- javaScript中dom操作
- json发送hppt请求
- CSS 页面元素
- 基于Jquery代码实现支持PC端手机端幻灯片代码
- 列表显示数据 但是数据的字体颜色要js添加
- 谈谈css中px , em,及rem
- jquery ajax 参数可以序列化
- jquery ui autocomplete实例
- javascript:;用法集锦