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