我想实现这样一个效果:单击gridview的行内任意地方都可以选择该行(就是行内复选框被选中),同时修改该行的背景色。当再次单击行内任意地方又可以取消选择。
另外,当单击选择行内复选框时,我希望可以选择复选框,同时修改行的背景色;单击取消行内复选框时,还原行的背景色,取消复选框的选中状态。
前台大概是这样的

为了实现单击选择或取消选择行,我是在gridview的RowDataBound事件中这么写的:

for (i = ; i <= GridView1.Rows.Count; i++)
{
//首先判断是否是数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//当鼠标点击时更改背景色
e.Row.Attributes.Add("onclick", "ck=this.getElementsByTagName('input');if(ck[0].type=='checkbox'&&ck[0].checked==false) {this.style.backgroundColor='#00A9FF';ck[0].checked=true;alert('单击行选择该行');}else {this.style.backgroundColor='#ffffff';ck[0].checked=false;alert('单击行不选中该行');}");
}
}

上面的alert是测试用的,请自行忽略。
为了实现通过行内的复选框选择和取消选择一行,我在行复选框的onclick里面的js代码如下所示:

function SelectedSingle(cb) {
var row = cb.parentNode.parentNode;
if (cb.checked) {
row.style.backgroundColor = "#66ff33";
}
else {
row.style.backgroundColor = "";
}
}

这个地方的alert和颜色是测试用的,视觉效果请暂时不管。

然后问题来了:我单击选择或取消选择行复选框时,似乎选不了行了。经测试发现是单击复选框时先执行了checkbox的onclick事件,然后执行了行的onclick事件。
于是结果是:在checkbox的onclick里面已经实现了需要的效果,然后再行的onclick事件中把实现的效果给抹杀还原了。
于是,我把行的onclick事件取消掉,改为onmousedown事件。结果发现,这个时候需要的效果是出来了,但是似乎复选框的onclick事件根本没执行。请问,这是何原因呢?

gridview的行选择的一个问题的更多相关文章

  1. JS控制GridView行选择

    ASP.NET里的GridView控件使用非常广泛,虽然其功能强大,但总有一些不尽如人意的地方.比如在选择行的时候,它就没有UltraWebGrid做的友好:UltraWebGrid允许用户设置是否显 ...

  2. GridView/DataGrid行单击和双击事件实现代码_.Net教程

    功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应  ...

  3. [每日电路图] 7、设计一个PCB的流程及细节·总结——给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章

    前言 最近两天使用AD14软件设计了一个蓝牙防丢器电路板(PCB)图纸,中间有一些细节在本文中记录下,方便下次设计PCB时参考.也希望能给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章 ...

  4. Pandas之容易让人混淆的行选择和列选择

    在刚学Pandas时,行选择和列选择非常容易混淆,在这里进行一下讨论和归纳 本文的数据来源:https://github.com/fivethirtyeight/data/tree/master/fa ...

  5. 动态横向(水平)合并GridView数据行DataRow的列

    前一段时间,Insus.NET有写过<动态合并GridView数据行DataRow的列>http://www.cnblogs.com/insus/p/3238348.html, 那是纵向( ...

  6. 【SecureCRT配置】修改默认卷屏行数当做一个操作,屏幕输出有上百行,当需要将屏幕回翻时,这个设置会有很大帮助,默认为500行,可以改为10000行,不用担心找不到了。 选项 => 全局选项 => Default Session => Edit Default Settings => Terminal => Emulation => Scrollback 修改为32000。

    SecureCRT配置屏幕内容输出到log文件 SecureCRT看不到前几分钟操作的内容,或者想把通过vi命令查看的日志输出到log文件(在懒得下载日志文件的情况下),所以接下来就这样操作: 文件保 ...

  7. DEV express 对Gridview某行的元素赋值

    1:获取选中的行某列的值 string colValue= this.gridView1.GetRowCellValue(this.gridView1.FocusedRowHandle, this.g ...

  8. GRIDVIEW多行多列合并单元格(合并列)

    GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章:  GridView多行多列合并单元格(完整代码和例子) ...

  9. 通过 Mesos、Docker 和 Go,使用 300 行代码创建一个分布式系统

    [摘要]虽然 Docker 和 Mesos 已成为不折不扣的 Buzzwords ,但是对于大部分人来说它们仍然是陌生的,下面我们就一起领略 Mesos .Docker 和 Go 配合带来的强大破坏力 ...

随机推荐

  1. python之Excel操作

    #coding:utf-8 __author__ = 'similarface' import xlrd book=xlrd.open_workbook('/Users/similarface/Dow ...

  2. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  3. px和em

    相同点: 都是长度单位 不同点: px是绝对单位,不支持IE的缩放,em是相对单位. px的值是固定的,指定是多少就是多少:em得值不是固定的,并且em会继承父级元素的字体大小 ps: 浏览器的默认字 ...

  4. Construct Binary Tree from Preorder and Inorder Traversal [LeetCode]

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  5. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  6. MySQL数据库管理用户权限

    http://blog.itpub.net/7607759/viewspace-675079/ 2.2 授予权限 前面提到了grant命令,grant的语法看起来可是相当复杂的呐: GRANT pri ...

  7. hdu 1008 注意同层情况

    #include<iostream> using namespace std; int main() { int n; ]; while(cin>>n) { ,m=; ) br ...

  8. iOS开发UI篇—IOS开发中Xcode的一些使用技巧

    iOS开发UI篇—IOS开发中Xcode的一些使用技巧 一.快捷键的使用 经常用到的快捷键如下: 新建 shift + cmd + n     新建项目 cmd + n             新建文 ...

  9. 倒计时js代码

    <div class="time"> <span id="t_d">00天</span> <span id=" ...

  10. [双连通分量] POJ 3177 Redundant Paths

    Redundant Paths Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13712   Accepted: 5821 ...