前端js过滤表格

//表格过滤
$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代码