jQuery 全选 反选 单击行改变背景色
我先把CSS样式放出来,其实这个可以直接忽略
body{margin:;padding:;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)单击行改变背景色
2)全选/反全选功能
//单击行改变背景色 选中行
$(".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");
} var len = $("table.datagrid tbody").find("input[name='check']").length;
var count = ;
$("table.datagrid").find("input[name='check']").each(function (i) {
var That = $(this);
if (That.prop("checked") == true) {
count++;
}
}); if (len == count) {
$("input[name='checkall']").attr("checked", "checked");
} else {
$("input[name='checkall']").removeAttr("checked");
}
}); //全选
$("#CheckAll").bind("click", function () {
var oThis = $(this);
if (oThis.prop("checked") == true) {
$("table.datagrid tbody").find("input[name='check']").attr("checked", "checked");
$("table.datagrid tbody").find("input[name='check']").parents("tr").addClass("table-row-selected");
} else {
$("table.datagrid tbody").find("input[name='check']").removeAttr("checked");
$("table.datagrid tbody").find("input[name='check']").parents("tr").removeClass("table-row-selected");
}
});
PS:功能都太簡單了,我都不好意思發出來。但工作中又經常會寫一些重複性代碼,想想還是貼出來
順便也可以提高自己的一點點積極性。Thx,that's all
后记:功能全部完成了,现已重新编辑放出来了
jQuery 全选 反选 单击行改变背景色的更多相关文章
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- jQuery全选反选插件
(function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...
- jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
- jquery全选 反选
//全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...
- 关于jquery全选反选 批量删除的一点心得
废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...
- jquery全选反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 全选反选 .prop('checked',!$(this).is(':checked'));
//废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...
随机推荐
- Metadata Lock原理7
http://blog.itpub.net/22664653/viewspace-1791744/ 一 简介 通过前面两篇文章的介绍,相信读到这里的各位对MDL 锁已经有了比较深入的了解了,本文将结合 ...
- 进程环境之getrlimit和setrlimit函数
每个进程都有一组资源限制,其中一些可以用getrlimit和setrlimit函数查询和更改. #include <sys/resource.h> int getrlimit( int r ...
- 1081. Rational Sum (20)
the problem is from PAT,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1081 the code ...
- 《Entity Framework 6 Recipes》中文翻译——第十章EntityFramework存储过程处理(八)
将插入.更新和删除操作映射到存储过程 问题 您想在存储过程中映射插入.更新和删除操作. 解决方案 下图所示的运动员Athlete实体模型.底层数据库有一张运动员Athlete表.您想使用存储过程进行实 ...
- Java基础知识强化103:Java常量池理解与总结
一.相关概念 1. 什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. 2. Class文件中的 ...
- iOS之可拖拽重排的CollectionView
修复了拖拽滚动时抖动的一个bug,新增编辑模式,进入编辑模式后不用长按触发手势,且在开启抖动的情况下会自动进入抖动模式,如图: test.gif 图1:垂直滚动 drag1.gif 图2:水平滚动 d ...
- 实现struts2框架
Struts最早是作为Apache Jakarta项目的组成部分,项目的创立者希望通过对该项目的研究,改进和提高JavaServer Pages .Servlet.标签库以及面向对象的技术水准.最初的 ...
- HDU 3533 Escape (BFS + 预处理)
Escape Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- java-MySQL存储过程
import java.sql.CallableStatement; import java.sql.Connection; import java.sql.DriverManager; import ...
- 自己改写的asp.net MVC EF Respoistory 仓储模式
之前改写网上收集的Respoistory 模式感觉很多地方都是不可取的,这里经过这段时间的充电重新改写一版,当然注释已加,还有不懂的,可以留言我. 首先还是拿出IRespoistory的接口层代码 u ...