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>



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

50个实用的jquery案例

1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器,   //只剩下那些与给定的选择器匹配的部分。在这种情况下,   //查询删除了任何没(:not)有(:has)  ...
  • u013415353
  • u013415353
  • 2016年02月25日 10:45
  • 261

JQuery:视频+实战总结

【前言】     整理总结完CSS后,便一鼓作气进入JQuery的世界;由于有了js的基础,所以直接晋级JQuery实战。早就听闻大名鼎鼎的JQuery,这次领教后果然名不虚传。 【菜鸟初始JQuer...
  • u012829124
  • u012829124
  • 2016年01月30日 14:17
  • 1139

Jquery ajax项目实例

本文所用ajax技术是Java web项目中实际使用的,所以具有一定的实用性,请仔细阅读代码,你会发现ajax动态增加和删除是很简单的。 首先前台代码 /scripts/jQuery/jque...
  • adgjlxxx
  • adgjlxxx
  • 2015年06月18日 17:20
  • 3755

jquery实战训练

JQuery实战训练,1.5秒返回页面,2.鼠标滑过显示内容,3.轮展图,4.返回顶部,5.右击显示菜单,6.内容编辑,7.购物车结算,实时更新。...
  • qq_19558705
  • qq_19558705
  • 2015年11月15日 20:24
  • 12470

jQuery练习实例(四)

最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果          有兴趣的同学可以参考一下,这幅效果,个人觉得挺不错的 Insert title he...
  • u010363836
  • u010363836
  • 2013年10月10日 09:15
  • 1716

jQuery中使用Ajax与后台交互实例

一、$.ajax的一般格式 $.ajax({      type: 'POST',      url: url ,     data: data ,     succes...
  • u010589037
  • u010589037
  • 2014年06月13日 20:14
  • 7606

《构建跨平台APP:jQuery Mobile移动应用实战》

http://product.dangdang.com/23472199.html
  • brucexia
  • brucexia
  • 2014年05月28日 10:14
  • 1431

JQuery小案例

1.
  • luohuaxinyue
  • luohuaxinyue
  • 2016年03月18日 12:32
  • 1114

最好懂的 Bootstrap 实战案例教程

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

Jquery实战视频教程学习

JQuery是一个兼容多浏览器的javascript库,本次学习的内容主要有概念、环境及入门实例,可以编辑的表格,横向纵向菜单,标签页效果,级联下拉框,窗口效果。通过这些知识的学习对Jquery有了系...
  • u013037201
  • u013037201
  • 2015年12月22日 16:48
  • 1121
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 实战案例
举报原因:
原因补充:

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