JQuery对行数据进行批量操作
2012-08-27 14:25
309 查看
我不知道实际开发中有没有用到这种效果,但我个人认为,这种方式更人性化,因为只要点到一行,就可以使CheckBox.checked=true; 不用非得点复选按钮才能实现;
实现的过程有点纠结,试了几次都没成,最后用了一个笨笨的方法,就是点击行的时候,让他的子元素(td)的背景颜色为红色.(因为我用到了光棒效果,如果我点击行(td)的时候,颜色是变了,但鼠标一离开的时候就又变回原来的颜色了)
可能你会问我了,那你咋判断CheckBox的状态是不是checked(勾选状态)啊?
其实我根本没去对它进行判断.... 希望大家不要喷我。我只是判断了一下选中行的子元素(td)的背景颜色和document.body的背景颜色是不是一样,如果一样,就让 CheckBox.checked=true,不一样就让CheckBox.checked=false.
思路就是这么个思路,如果谁还有更好的方法贴上来,大家一起学习学习..
Jquery中用到的方法:
first():第一个元素;
nextAll():在XX之后的所有元素:主要为了把第一行的表头去掉
children():查找子元素;
toggleClass();切换样式
attr():给CheckBox添加checked属性;
主要实现的代码:
$(function () {
//除了表头(第一行)以外所有的行添加click事件.
$("tr").first().nextAll().click(function () {
//为点击的这一行切换样式bgRed里的代码:background-color:#FF0000;
$(this).children().toggleClass("bgRed");
//判断td标记的背景颜色和body的背景颜色是否相同;
if ($(this).children().css("background-color") != $(document.body).css("background-color")) {
//如果相同,CheckBox.checked=true;
$(this).children().first().children().attr("checked", true);
}else {
//如果不同,CheckBox.checked=false;
$(this).children().first().children().attr("checked", false);
}
});
});
附:
实现的过程有点纠结,试了几次都没成,最后用了一个笨笨的方法,就是点击行的时候,让他的子元素(td)的背景颜色为红色.(因为我用到了光棒效果,如果我点击行(td)的时候,颜色是变了,但鼠标一离开的时候就又变回原来的颜色了)
可能你会问我了,那你咋判断CheckBox的状态是不是checked(勾选状态)啊?
其实我根本没去对它进行判断.... 希望大家不要喷我。我只是判断了一下选中行的子元素(td)的背景颜色和document.body的背景颜色是不是一样,如果一样,就让 CheckBox.checked=true,不一样就让CheckBox.checked=false.
思路就是这么个思路,如果谁还有更好的方法贴上来,大家一起学习学习..
Jquery中用到的方法:
first():第一个元素;
nextAll():在XX之后的所有元素:主要为了把第一行的表头去掉
children():查找子元素;
toggleClass();切换样式
attr():给CheckBox添加checked属性;
主要实现的代码:
$(function () {
//除了表头(第一行)以外所有的行添加click事件.
$("tr").first().nextAll().click(function () {
//为点击的这一行切换样式bgRed里的代码:background-color:#FF0000;
$(this).children().toggleClass("bgRed");
//判断td标记的背景颜色和body的背景颜色是否相同;
if ($(this).children().css("background-color") != $(document.body).css("background-color")) {
//如果相同,CheckBox.checked=true;
$(this).children().first().children().attr("checked", true);
}else {
//如果不同,CheckBox.checked=false;
$(this).children().first().children().attr("checked", false);
}
});
});
附:
//点击行,选中 checkbox |
2 | $( "tr:gt(0)" ).live( "click" , function (){ |
3 | if ($( this ).hasClass( "selected" )){ |
4 | $( this ).removeClass( "selected" ).find( ":checkbox" ).attr( "checked" , false ); |
5 | } else { |
6 | $( this ).addClass( "selected" ).find( ":checkbox" ).attr( "checked" , true ); |
7 | } |
8 | }); |
相关文章推荐
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- hibernate如何进行批量的数据操作,防止内存溢出
- jQuery 操作列表批量删除数据
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- ASP.Net中通过Jquery前端对Repeater控件绑定的数据进行操作
- WinForm中利用DataGridView控件对数据进行批量操作
- C#利用SqlDataAdapte对DataTable进行批量数据操作
- WinForm中利用DataGridView控件对数据进行批量操作
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- MERGE语句用来合并UPDATE和INSERT语句,一张表的大数据操作,要同时进行增删改,提高性能
- 对SQL数据表和数据库进行迭代操作
- 【ecshop 资料】ecshop对数据库测试数据进行清除操作。老杨ecshop原创
- 利用EXP/IMP进行数据迁移,如何转换表空间操作(完整版)
- Android—文件进行数据存储(四中操作模式)
- Asp.net通过Jquery操作WebService进行Ajax读写
- tcltk控制chariot进行测试,并将批量数据输出成excel
- 从数据库取出数据在jsp页面上以表格形式呈现,并对表格数据进行分页打印操作。
- JS 和 JQuery 对 Iframe 内外(父子)页面进行操作
- 限制表同时只能一个Session进行数据操作