jQuery 全选 反选 单击行改变背景色
2013-07-02 00:49
302 查看
我先把CSS样式放出来,其实这个可以直接忽略
我们再来看页面HTML结构
实现功能
1)单击行改变背景色
2)全选/反全选功能
PS:功能都太簡單了,我都不好意思發出來。但工作中又經常會寫一些重複性代碼,想想還是貼出來
順便也可以提高自己的一點點積極性。Thx,that's all
后记:功能全部完成了,现已重新编辑放出来了
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)单击行改变背景色
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 = 0; $("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 全选/反选以及单击行改变背景色实例
- jQuery学习心得----鼠标经过时改变table行的背景色
- jquery改变tr背景色的示例代码
- jquery 改变table选中行背景色
- ListView单击、选中时改变背景色
- 单击按钮改变panel中的字体大小和背景色
- jquery实现改变显示的文字的背景色和字体大小
- jquery实现实时改变网页字体大小、字体背景色和颜色的方法
- 基于jquery 全选、反选、各行换色、单击行选中事件实现代码
- jquery 表格(鼠标悬停列标题,改变该列的背景色)
- ListView单击、选中、时改变背景色
- jQuery 实现 当鼠标放表格行上的时候改变背景色。
- 鼠标获得焦点、移开, 改变背景色,鼠标形状 ,单击链接到其他页面
- jquery 点击元素实现背景色改变,点击元素以外任意地方还原该元素背景色
- jquery动态改变div背景色出现类似跑马灯效果
- JQuery------实现鼠标摁下抬起时div背景色改变
- 用jquery实现点击栏目背景色改变
- 全选 和 反选 单击一行选中 和 提交路径的改变
- 操作gridview,选中行时改变背景色且checkbox被选中,隔行变色,全选变色