日期: 2008 年 2 月 4 日

在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>