前端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代码