我先把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 全选 反选 单击行改变背景色的更多相关文章

  1. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  2. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 关于JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...

  4. jQuery全选反选插件

    (function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...

  5. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  6. jquery全选 反选

    //全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...

  7. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  8. jquery全选反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery 全选反选 .prop('checked',!$(this).is(':checked'));

    //废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...

随机推荐

  1. Metadata Lock原理7

    http://blog.itpub.net/22664653/viewspace-1791744/ 一 简介 通过前面两篇文章的介绍,相信读到这里的各位对MDL 锁已经有了比较深入的了解了,本文将结合 ...

  2. 进程环境之getrlimit和setrlimit函数

    每个进程都有一组资源限制,其中一些可以用getrlimit和setrlimit函数查询和更改. #include <sys/resource.h> int getrlimit( int r ...

  3. 1081. Rational Sum (20)

    the problem is from PAT,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1081 the code ...

  4. 《Entity Framework 6 Recipes》中文翻译——第十章EntityFramework存储过程处理(八)

    将插入.更新和删除操作映射到存储过程 问题 您想在存储过程中映射插入.更新和删除操作. 解决方案 下图所示的运动员Athlete实体模型.底层数据库有一张运动员Athlete表.您想使用存储过程进行实 ...

  5. Java基础知识强化103:Java常量池理解与总结

    一.相关概念 1. 什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. 2. Class文件中的 ...

  6. iOS之可拖拽重排的CollectionView

    修复了拖拽滚动时抖动的一个bug,新增编辑模式,进入编辑模式后不用长按触发手势,且在开启抖动的情况下会自动进入抖动模式,如图: test.gif 图1:垂直滚动 drag1.gif 图2:水平滚动 d ...

  7. 实现struts2框架

    Struts最早是作为Apache Jakarta项目的组成部分,项目的创立者希望通过对该项目的研究,改进和提高JavaServer Pages .Servlet.标签库以及面向对象的技术水准.最初的 ...

  8. HDU 3533 Escape (BFS + 预处理)

    Escape Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  9. java-MySQL存储过程

    import java.sql.CallableStatement; import java.sql.Connection; import java.sql.DriverManager; import ...

  10. 自己改写的asp.net MVC EF Respoistory 仓储模式

    之前改写网上收集的Respoistory 模式感觉很多地方都是不可取的,这里经过这段时间的充电重新改写一版,当然注释已加,还有不懂的,可以留言我. 首先还是拿出IRespoistory的接口层代码 u ...