jquery 实战案例

<script type=”text/javascript”>
/**$(document).ready(function(){
//事件的注册
});*/
$(function(){
//获得class属性为parent的tr元素进行click事件的注册
$(“tr.parent”).click(function(){
$(this).toggleClass(‘selected’)//自动添加或者移除selected样式
.siblings(‘.child_’+this.id).toggle();
}).click();
});
</script>

<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr class=”parent” id=”row_01″><td colspan=”3″>前台设计组</td></tr>
<tr class=”child_row_01″><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class=”child_row_01″><td>李四</td><td>女</td><td>浙江杭州</td></tr>

<tr class=”parent” id=”row_02″><td colspan=”3″>前台开发组</td></tr>
<tr class=”child_row_02″><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr class=”child_row_02″><td>找六</td><td>男</td><td>浙江温州</td></tr>

<tr class=”parent” id=”row_03″><td colspan=”3″>后台开发组</td></tr>
<tr class=”child_row_03″><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class=”child_row_03″><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>

<script type=”text/javascript”>
$(function(){
$(“#filterName”).keyup(function(){
$(“table tbody tr”).hide()
.filter(“:contains(‘”+($(this).val())+”‘)”)
.show();
});
});
</script>

<div>
<br/>
筛选：
<input id=”filterName” />
<br/>

</div>

<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
<tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
<tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>
<tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>
</tbody>
</table>

 

$(function(){
//找到表格的内容区域中所有的奇数行
$(“tbody tr:even”).css(“background-color”,”#ECE9D8″);
//我们需要找到所有的学号单元格
var numTd=$(“tbody td:even”);
//给这些单元格注册鼠标点击事件
numTd.click(function(){
//找到当前鼠标点击的单元格,this表示当前响应了click的td
var tdObj=$(this);
if(tdObj.children(“input”).length>0)
{
//表示当前td中有input,不执行click事件处理
return false;
}
//获得单元格中的内容
var text=tdObj.html();
//清空td中的内容
tdObj.html(“”);
//创建文本框对象,设置样式,添加到td中
var inputObj=$(“<input type=’text’>”).css(“border-width”,”0″).css(“font-size”,”16px”).width(tdObj.width())
.css(“background-color”,tdObj.css(“background-color”)).val(text).appendTo(tdObj);
//单元格加入文本框之后就被选中
inputObj.trigger(“focus”).trigger(“select”);
inputObj.click(function(){
return false;
});
//处理文本框的回车和esc按键的操作
inputObj.keyup(function(event){
//获得键盘的值
var keycode=event.which;
if(keycode==13)
{
//回车
var inputText=$(this).val();
tdObj.html(inputText);
}

if(keycode==27)
{
tdObj.html(text);
}
});
});
});

 

<table>
<thead>
<tr>
<th colspan=”2″>鼠标点击表格项就可以编辑</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>000001</td>
<td>张三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</td>
<td>赵六</td>
</tr>
</tbody>
</table>