jquery 实战案例

原创 2016年08月30日 14:05:18

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



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery实战案例精粹

  • 2014年07月25日 14:28
  • 4.22MB
  • 下载

jQuery LigerUI经典实战案例教程

  • 2013年06月14日 13:20
  • 49.18MB
  • 下载

《Web渗透技术及实战案例解析》pdf

下载地址:网盘下载 内容简介 编辑 本书从Web渗透的专业角度,结合网络安全中的实际案例,图文并茂地再现Web渗透的精彩过程。本书共分7章,由浅入深地介绍和分析了...

微服务实战(四):服务发现的可行方案以及实践案例

(转载自dockone.io 原作者杨峰) 这是关于使用微服务架构创建应用系列的第四篇文章。第一篇介绍了微服务架构的模式,讨论了使用微服务架构的优缺点。第二和第三篇描述了微服务架构内部的通讯机制。这...

分布式事务之——tcc-transaction分布式TCC型事务框架搭建与实战案例(基于Dubbo/Dubbox)

一、背景 有一定分布式开发经验的朋友都知道,产品/项目/系统最初为了能够快速迭代上线,往往不太注重产品/项目/系统的高可靠性、高性能与高扩展性,采用单体应用和单实例数据库的架构方式快速迭代开发;当产...

最好懂的 Bootstrap 实战案例教程

我们每期会根据不用的项目案例安排不同的技术栈免费课程!免费!免费!免费!来帮助大家提高,有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候,如果每一个按钮、样...

Impala内存优化实战案例

Impala内存优化实战案例 文章来源:畅游DT时代(微信公众号) 作者:中国联通网研院网优部李珂 一. 引言     Hadoop生态中的No...

大数据Spark “蘑菇云”行动第80课:Spark GraphX 综合案例分析与实战

大数据Spark “蘑菇云”行动第80课:Spark GraphX 综合案例分析与实战

K-means 聚类算法的理解与案例实战

工作之后,发现对算法和技术的理解和上学时学习是不一样的,当时也整理了几篇关于k-means聚类的文章,但是现在看起来比较苍白和空洞,于是打算带着重新学习的态度对以往学习过或者见过的一些机器学习算法进行...

bootstrap实战-起步案例的再编写

实战
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 实战案例
举报原因:
原因补充:

(最多只允许输入30个字)