页面级别的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="查询" onclick="searchVoyageNo()"/><input name="clear" type="button" class="but_black" value="清除" onclick="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" onkeyup="onkeyup_toUpper(this)"  tabindex="3"/></td><td class="text_r">航次：</td><td><s:textfield id="voyageNo" cssClass="input_s_1" onkeyup="onkeyup_toUpper(this)"  tabindex="3"/></td></tr><tr><td class="text_r">英文船名：</td><td><s:textfield id="shipNameEn" cssClass="input_s_1" onkeyup="onkeyup_toUpper(this)" tabindex="4"/></td><td class="text_r">出发港：</td><td><s:textfield id="loadPortId" cssClass="input_s_1" onkeyup="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隐藏。

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

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