目的
实现鼠标点击表格行元素,就可以选中所在行内的复选框,实现数据勾选效果。多用于管理系统中数据列表上。
效果
录制了一个简单的动画来呈现。
方法
这里采用jQuery框架做实现,当然原生的js也可以实现,只是麻烦一些。
$(function () {
//除了表头(第一行)以外所有的行添加click事件.
$("tr").slice(1).click(function () {
// 切换样式
$(this).toggleClass("tr_active");
// 找到checkbox对象
var chks = $("input[type='checkbox']",this);
var tag = $(this).attr("tag");
if(tag=="selected"){
// 之前已选中,设置为未选中
$(this).attr("tag","");
chks.prop("checked",false);
}else{
// 之前未选中,设置为选中
$(this).attr("tag","selected");
chks.prop("checked",true);
}
});
});
说明
代码比较简单,主要用到jQuery中的几个方法:
- slice(1)将第一行tr(一般为表头)去除绑定事件,通常表头的checkbox是用来做全选的。
- toggleClass为tr注册或反注册样式tr_active,tr_active是自己定义的,可根据需要修改,一般配合着是修改背景色为深色,标识为选中状态。
- 选择器$(“input[type=’checkbox’]”,this)在当前tr中查出checkbox。
- $(this).attr(“tag”)在tr中查找自定义标签tag。
- chks.prop(“checked”,true)修改checkbox选中状态。