页面级别的JS模糊查询

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

页面代码如下：

<div class="search">
		<h2>
			<span class="fl">查询条件</span>
			<span class="fr">         
				<input name="search" type="button" class="but_green" tabindex="2" value="查询" οnclick="searchVoyageNo()"/>
				<input name="clear" type="button" class="but_black" value="清除" οnclick="clearV();" />
            </span><!--  span里无内容时，此span不能删除  -->
		</h2>
		
		<div class="public_inner">
			<table width="100%" border="0" cellspacing="1" cellpadding="0" class="public_table">
				<tr>
					<td class="text_r">IMO号：</td>
					<td><s:textfield id="transportID" cssClass="input_s_1" οnkeyup="onkeyup_toUpper(this)"  tabindex="3"/>
					</td>
					<td class="text_r">航次：</td>
					<td><s:textfield id="voyageNo" cssClass="input_s_1" οnkeyup="onkeyup_toUpper(this)"  tabindex="3"/>
					</td>
				</tr>
				<tr>
					<td class="text_r">英文船名：</td>
					<td><s:textfield id="shipNameEn" cssClass="input_s_1" οnkeyup="onkeyup_toUpper(this)" tabindex="4"/></td>
					<td class="text_r">出发港：</td>
					<td><s:textfield id="loadPortId" cssClass="input_s_1" οnkeyup="onkeyup_toUpper(this)" tabindex="4"/></td>
				</tr>
			</table>
		</div>
	</div>
	
	<div class="data_list">
		<h2>
			<span class="fl">船期信息列表</span>
			<span class="fr"></span><!--  span里无内容时，此span不能删除  -->
		</h2>
		<div class="list_inner">
		<table id="shipScheduleVoyage" width="100%" border="0" cellspacing="1" cellpadding="0" class="list_table_s">
			  <tr>
			  	<th >IMO号</th>
				<th >航次号</th>				
				<th >英文船名</th>
				<th >中文船名</th>
				<th >出发港</th>
				<th >船代</th>
				<th >承运人</th>
		      </tr>
		      <s:iterator value="shipSchedule" status="index">
		      	  <tr> 
		      		<td  id="transportID"><input name="transportID" style="border:0px;width:100px;text-align: center;" type="text" readonly="readonly" value="<s:property value="transportID"/>"/></td>
					<td  id="voyageNo"><input name="voyageNo" type="text" style="border:0px;width:80px;text-align: center;" readonly="readonly" value="<s:property value="voyageNo"/>"/></td>					
				    <td  id="shipNameEn"><input name="shipNameEn" type="text" style="border:0px;width:auto;text-align: center;" readonly="readonly" value="<s:property value="shipNameEn"/>"/></td>				    
				    <td  id="shipNameCn"><input type="text" style="border:0px;width:auto;text-align: center;" readonly="readonly" value="<s:property value="shipNameCn"/>"/></td>
				    <td  id="loadPortId"><input name="loadPortId" type="text" style="border:0px;width:60px;text-align: center;" readonly="readonly" value="<s:property value="loadPortId"/>"/></td>
				    <td  id="agentId"><input type="text" style="border:0px;width:auto;text-align: center;" readonly="readonly" value="<s:property value="agentId"/>"/></td>
				    <td  id="carrier"><input type="text" style="border:0px;width:60px;text-align: center;" readonly="readonly" value="<s:property value="carrier"/>"/></td>
			      </tr>
		      </s:iterator>
		  </table>		  
		</div>
	</div>

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隐藏。

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

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