jQuery 全选/反选以及单击行改变背景色实例


Posted in Javascript onJuly 02, 2013

我先把CSS样式放出来,其实这个可以直接忽略

body{margin:0;padding:0;font-size:12px;font-family:微软雅黑;} 
.datagrid{width:100%;} 
.datagird tr th{background-color:#191970; font-size:14px;} 
.datagrid tr th, .datagrid tr td{border:1px solid #ccc; border-collapse:collapse;} 
/* 选中行样式 */ 
.table-row-selected{background:#fff68f;}

我们再来看页面HTML结构
<div id="page"> 
<table class="datagrid" cellpadding="0" cellspacing="0"> 
<thead> 
<tr> 
<th><input id="CheckAll" name="checkall" type="checkbox" /></th> 
<th>ID</th> 
<th>标题</th> 
<th>发布人</th> 
<th>发布时间</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td align="center"><input type="checkbox" name="check" /></td> 
<td align="center" width="5%">1</td> 
<td>阿里做对了哪三件事?</td> 
<td align="center" width="10%">internet</td> 
<td align="center" width="15%">2013-07-01</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="check" /></td> 
<td align="center" width="5%">2</td> 
<td>大盘点:被互联网改写的16个传统行业</td> 
<td align="center" width="10%">internet</td> 
<td align="center" width="15%">2013-07-01</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="check" /></td> 
<td align="center" width="5%">3</td> 
<td>如果智能手机市场有变,酷派们怎么办?</td> 
<td align="center" width="10%">internet</td> 
<td align="center" width="15%">2013-07-01</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="check" /></td> 
<td align="center" width="5%">4</td> 
<td>看看福特们是如何抵御谷歌苹果的?</td> 
<td align="center" width="10%">internet</td> 
<td align="center" width="15%">2013-07-01</td> 
</tr> 
</tbody> 
</table> 
</div>

实现功能
1)单击行改变背景色
$(".datagrid tbody tr").bind("click", function () { 
var oThis = $(this); 
if (oThis.hasClass("table-row-selected")) { 
oThis.removeClass("table-row-selected"); 
oThis.children("td:eq(0)").children("input[name='check']").removeAttr("checked"); 
} else { 
oThis.addClass("table-row-selected"); 
oThis.children("td:eq(0)").children("input[name='check']").attr("checked", "checked"); 
} 
});

2)全选/反全选功能(未完成,待续)
Javascript 相关文章推荐
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
javascript字符串函数汇总
Dec 06 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
详解a++和++a的区别
Aug 30 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 #Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 #Javascript
JS实现可改变列宽的table实例
Jul 02 #Javascript
js 图片随机不定向浮动的实现代码
Jul 02 #Javascript
js猜数字小游戏的简单实现代码
Jul 02 #Javascript
jQuery中获取Radio元素值的方法
Jul 02 #Javascript
js网页版计算器的简单实现
Jul 02 #Javascript
You might like
php桌面中心(二) 数据库写入
2007/03/11 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
同居协议书范本
2014/04/23 职场文书
英语专业自荐书
2014/06/13 职场文书
应届生自荐信
2014/06/30 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js