需求:后端封装成table显示数据,避免重复请求服务区,利用Jquery前端刷选数据
环境:Jquery1.4.2,JSP页面内嵌iframe
?
方式:
一个文本框,用于输入检索数据。
<input id="reportJXCTab-searchText" type="text">
?一个Table(请勿模仿,只是一小部分)。
<iframe width="100%" scrolling="auto" height="100%" frameborder="0" align="top" border="0" id="r-jxc-html" src="XX"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body alink="#000000" link="#000000" text="#000000" vlink="#000000"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr><td width="50%"> </td><td align="center"> <table id="table_report" style="width: 3820px;" border="0" cellpadding="0" cellspacing="0"> <thead> <tr> <th scope="col" abbr="Configurations" class="nobg">仓库</th> <th scope="col">编号</th> <th scope="col">名称</th> </tr> </thead> <tfoot> <tr> <td colspan="40"><div><a href="javascript:void(0)">首页</a><a href="javascript:void(0)">上一页</a><a href="javascript:void(0)">1</a><a href="javascript:void(0)">2</a><a href="javascript:void(0)">3</a><a href="javascript:void(0)">4</a><a href="javascript:void(0)">5</a><a href="javascript:void(0)">6</a><a href="javascript:void(0)">7</a><a href="javascript:void(0)">8</a><a href="javascript:void(0)">9</a><a href="javascript:void(0)">10</a><a href="javascript:void(0)">下一页</a><a href="javascript:void(0)">尾页</a></div><div id="pages"></div></td> <td><span id="pageNumber">1 / 10</span></td> </tr> </tfoot> <tr> <th scope="row" class="specalt">总部默认仓库</th> <td class="alt">A12-SJQWLC0-36</td> <td class="alt">四季青乌龙茶 </td> </tr> <tr> <th scope="row" class="spec">总部默认仓库</th> <td>BS</td> <td>白玉</td> </tr> <tr> <th scope="row" class="specalt">默认仓库</th> <td class="alt">XF</td> <td class="alt">小红豆</td> </tr> <tr> <th scope="row" class="specalt">总部默认仓库</th> <td class="alt">SJ</td> <td class="alt">咖啡豆</td> </tr> <tr> <th scope="row" class="specalt">默认仓库</th> <td class="alt">A14-GL4FPZG-BS</td> <td class="alt">覆盆子果汁</td> </tr> <tr> <th scope="row" class="spec">默认仓库</th> <td>BS</td> <td>水蜜桃</td> </tr> <tr> <th scope="row" class="specalt">默认仓库</th> <td class="alt">TW</td> <td class="alt">玫瑰</td> </tr> <tr> <th scope="row" class="spec">默认仓库</th> <td>A14-SXCZGT0-GC</td> <td>罐头</td> </tr> </table> </td><td width="50%"> </td></tr> </tbody></table> </body> </iframe>
?
JavaScript:
$("#reportJXCTab-searchText").keyup(function() { var filterText = $(this).val(); $("#r-jxc-html").contents().find("#table_report tr").not(":first").hide().filter(":contains('" + filterText + "')").show(); }).keyup();
?
?
?