您的位置:首页 > Web前端

前端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代码
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: