在jQuery中用:contains过滤表格内容

愈发的觉得在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>&nbsp;</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>

《在jQuery中用:contains过滤表格内容》上有5条评论

  1. 这条确实很强悍!支持一下,没有想到可以这么用!

  2. 呵呵 ,只能根据当前选择显示
    应该得考虑 上次选择的…

  3. 是啊,一开始只是简单弄弄,所以没搞复杂
    而且因为实际环境中,使用了tab,用户同一时刻只能看到一个select所以就没细弄

  4. 如果没有jquery 这个效果实现起来要几十行代码 真的太好了
    正在学习jquery 希望和您多多交流 我的博客:www.qbencao.com
    交换个链接吧 [face76]

  5. 看了博主的文章,深感jQuery的强大与精巧,但是也深深佩服John Resig的构思。更想进一步学习JavaScript的底层代码了

回复 Shawphy 取消回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据