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 相关文章推荐
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
js回调函数仿360开机
Dec 26 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
计算新浪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
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
node错误处理与日志记录的实现
2018/12/24 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
彻底搞懂Python字符编码
2018/01/23 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python流程控制语句的深入讲解
2020/06/15 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
个人思想政治总结
2015/03/05 职场文书
党员干部学习心得体会
2016/01/23 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers