jquery 前端筛选table

gjf450005950

浏览: 20020 次
性别:
来自: 上海

最近访客更多访客>>

xie_nengbo

cnsoap

kyle

宋仁投

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

需求：后端封装成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%">&nbsp;</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%">&nbsp;</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();

分享到：