页面级别的JS模糊查询

做项目的时候通过WebService接口查询出一系列的信息，但是因为信息量大，一时找不到自己想要的。所以加入查询，但是是通过WebService接口查询的，导致不能后台处理这个查询。故而写了一段JS。通过轮询表格的td的方法实现模糊查询。

页面代码如下：

		

			查询条件
			         
				
				
            
		
		
		

			

				

					
IMO号：
					

					
					
航次：
					

					
				
				

					
英文船名：
					

					
出发港：
					

				
			
		
	
	
	

		

			船期信息列表
			
		
		

		
		      	  

			  

			  	
IMO号
				
航次号
				
				
英文船名
				
中文船名
				
出发港
				
船代
				
承运人
		      
		      
 
		      		
"/>
					
"/>
					
				    
"/>
				    
				    
"/>
				    
"/>
				    
"/>
				    
"/>
			      
		      
		  
		  
		
	

JS代码如下：

$(document).ready(function(){
		// 选中表格行信息
		$("#shipScheduleVoyage tr td:not('.oper_btn')").live("click",function(){
			var num = 0;
			var obj = new Array();
			$("#shipScheduleVoyage tr").removeClass("td_bgcolor");
			$(this).parent().addClass("td_bgcolor");
			$(this).parent().find("input:not(:button)").each(function(){
	          	obj[num] = $(this).val();
	          	num++;
			}); 
			window.opener.getVoyage(obj);
			window.close();
		});
	});
	//查询出船期之后的进一步筛选
	function searchVoyageNo(){
		var voyageNo = $("#voyageNo").val();
		var shipNameEn =$("#shipNameEn").val();
		var loadPortId = $("#loadPortId").val();
		var transportID =$("#transportID").val();
		reset();
		if(voyageNo != ""){
			$("#shipScheduleVoyage>tbody>tr:not(:first)").each(function(){
				$(this).find("input[name ='voyageNo']").each(function(){
					var vn = $(this).val();
					if(vn.indexOf(voyageNo) == -1 )
					{
						$(this).parents("tr").hide();
					}
				});
			});
		}
		if(shipNameEn != ""){
			$("#shipScheduleVoyage>tbody>tr:not(:first)").each(function(){
				$(this).find("input[name ='shipNameEn']").each(function(){
					var sne = $(this).val();
					if(sne.indexOf(shipNameEn) == -1 )
					{
						$(this).parents("tr").hide();
					}
				});
			});
		}
		if(loadPortId != ""){
			$("#shipScheduleVoyage>tbody>tr:not(:first)").each(function(){
				$(this).find("input[name ='loadPortId']").each(function(){
					var lpi = $(this).val();
					if(lpi.indexOf(loadPortId) == -1 )
					{
						$(this).parents("tr").hide();
					}
				});
			});
		}
		if(transportID != ""){
			$("#shipScheduleVoyage>tbody>tr:not(:first)").each(function(){
				$(this).find("input[name ='transportID']").each(function(){
					var ti = $(this).val();
					if(ti.indexOf(transportID) == -1 )
					{
						$(this).parents("tr").hide();
					}
				});
			});
		}
	}
	//查询之前恢复全部的船期信息
	function reset(){
		$("#shipScheduleVoyage>tbody>tr:not(:first)").each(function(){
			$(this).find("input[name ='shipNameEn']").each(function(){
				$(this).parents("tr").show();
			});
		});
	}
	//清除查询条件
	function clearV(){
		$("#voyageNo").val("");
		$("#shipNameEn").val("");
		$("#loadPortId").val("");
		$("#transportID").val("");
	}
	
	/**
	 *英文字母转大写 
	 */
	function onkeyup_toUpper(obj){
		$(obj).val($(obj).val().toUpperCase());
	}

原则上是通过，获取到查询条件的值。然后通过比对轮询td的结果，如果在td中的值含有此字段就保留，如果没有则把tr隐藏。

页面上全数据显示的效果如下：

通过四个字段模糊查询之后的显示效果：