在jQuery中用:contains过滤表格内容
2008年2月4日 – 01:31愈发的觉得在jQuery中写东西真是简单实惠啊。看下面咯。
- 开课日期
- 上课地点
- 上课时段
| 开课日期 | 上课地点 | 上课时段 | 优惠价 | 报名 |
|---|---|---|---|---|
| 2008-01-16 | 徐汇 | 早上 | 2680 | |
| 2008-01-30 | 黄埔 | 早上 | 2680 | |
| 2008-01-30 | 徐汇 | 周日全天 | 2680 |
<script type="text/javascript">
$(function(){
$("#courses_select select").change(function () {
if($(this).val()=="全部"){
$("#more_courses tbody tr").show();
}else{
$("#more_courses tbody tr").hide().filter(":contains("+$(this).val()+")").show();
}
});
});
</script>
<p> </p>
<div id="more_courses">
<div id="courses_select"><dl><dt>开课日期</dt><dd><select size="6">
<option>全部</option>
<option>2008-01-13</option>
<option>2008-01-30</option>
<option>2008-01-16</option>
</select> </dd><dt>上课地点</dt><dd class="hide"><select size="6">
<option>全部</option>
<option>黄埔</option>
<option>徐汇</option>
</select> </dd><dt>上课时段</dt><dd class="hide"><select size="6">
<option>全部</option>
<option>早上</option>
<option>晚上</option>
<option>周日全天</option>
</select> </dd></dl></div>
<div>
<table>
<thead>
<tr>
<th>开课日期</th><th>上课地点</th><th>上课时段</th><th>优惠价</th><th>报名</th>
</tr>
</thead>
<tbody>
<tr>
<td>2008-01-16</td>
<td>徐汇</td>
<td>早上</td>
<th>2680</th>
<td><button onclick="location.href='#'"><span></span>我要报名</button></td>
</tr>
<tr>
<td>2008-01-30</td>
<td>黄埔</td>
<td>早上</td>
<th>2680</th>
<td><button onclick="location.href='#'"><span></span>我要报名</button></td>
</tr>
<tr>
<td>2008-01-30</td>
<td>徐汇</td>
<td>周日全天</td>
<th>2680</th>
<td><button onclick="location.href='#'"><span></span>我要报名</button></td>
</tr>
</tbody>
</table>
</div>
</div>
4 Responses to “在jQuery中用:contains过滤表格内容”
这条确实很强悍!支持一下,没有想到可以这么用!
By 雪山旗云 on Mar 6, 2008
呵呵 ,只能根据当前选择显示
应该得考虑 上次选择的…
By cssrain on Mar 14, 2008
是啊，一开始只是简单弄弄，所以没搞复杂
而且因为实际环境中，使用了tab，用户同一时刻只能看到一个select所以就没细弄
By Shawphy on Mar 14, 2008
如果没有jquery 这个效果实现起来要几十行代码 真的太好了
正在学习jquery 希望和您多多交流 我的博客：www.qbencao.com
交换个链接吧 [face76]
By 阿草哥 on Apr 23, 2008