GridView实现跟随鼠标移动及单击高亮显示

看着一些表格带那些鼠标移动过去的时候会触发tr的背景颜色发生变化，当你单击某一行时，它还能以高亮的颜色显示你单击中了哪一条，相当羡慕的说啊！！！
网上面也有很多的例子，有通过C#代码的Attribute方法绑定，也有直接写JS实现的，由于觉得在服务器端实现会浪费资源（虽然很小），所以哥哥我就想在JS那里写一下，至于怎么实现，我会一步一步的把过程写出来，不着急，哈。

1、实现鼠标经过tr时，触发行的背景色发生变化，一开始的念头是通过onmouseover 和 onmouseout 来实现的，于是就写了下面一段出来（Gridview的ID值是 gvE4，下同）

$("#gvE4").find("tr").attr("onmousemove","c=this.style.backgroundColor;this.style.backgroundColor='#DFF8FF'");
$("#gvE4").find("tr").attr("onmouseout","this.style.backgroundColor=c");

思路是上我觉得是没问题的，但最后却没有反应，于是百度了一下，找到了另外一个办法，如下：

$("#gvE4 tr").hover(
                function(){$(this).addClass("hover");},
                function(){$(this).removeClass("hover");}
            );

这个写法很漂亮，也实用，原理简单说一下，通过设定tr的hover事件，hover(function(){},function(){})里面的第一个function是鼠标经过时触发的，第二个function是鼠标离开时触发的，而里面所执行的就是通过经过与离开时，动态绑定或去掉一个class属性，而这个hover类的话，在下面：

<style type="text/css">
        .hover{background-color:#DFF8FF; font-weight:bold;} /*这里是鼠标经过时的颜色*/
</style>

这样，第一个功能已经实现了。

 

2、当鼠标单击的时候，怎么样使得被单击的一行高亮显示呢？？要做到两点：单击的那一行高亮显示、其它行要去掉高亮效果。

那要做到这两步的话，有一个简单的方法：先把所有的行数都去掉高亮，然后再为被单击的那一行添加高亮效果，代码如下：

            $("#gvE4 tr td").click(function(){         
                $(this).parent().parent().find("tr").attr("style","height:28px;");
                $(this).parent().attr("style","height:28px;background-color:#DFF8FF; font-weight:bold;");
            });

这样子以后，当鼠标单击某一行时，它就会被高亮显示出来，但是，令人蛋疼的是，由于GridView的分页功能，它的页脚那里鼠标经过或被单击时，也会以高亮显示，见下图（最底部）：

图一、分页下方也被高亮显示了

这样的效果真的会让人看得蛋疼，于是反复的看了一下jquery的手册，想办法只选中前面几个tr，而把最后一行tr排除在外就行了，于是看到过last,也看到过eq的用法，最后又看到了lt，一翻偿试后，发现lt能够解决这个办法，但也不能一劳永逸，先看看代码我再说一下吧。

由于我是选解决那个鼠标移动时的问题再解决单击时产生的问题，所以我先说说第一个解决办法：

1) 都晓得，css属性background-color与直接定义标签的background-color属性的优先级别不一样的，实验证明，内置的属性优先级别要比css那个高，所以，只要我把它的背景颜色直接设置为白色，那么无论它怎么通过addClass或removeClass都不会影响到它的外观，嘿嘿，于是嘛，直接在gridview的属性栏把分页的背景设成白色了，然后运行看，鼠标移动过去时，木有变化，哈哈，设置的传送门在下面：

图二、设置分页的背景颜色，直接回避该问题

2) 当然，会了第二个方法的话，第一个可以不鸟它，咱们用点高深点的办法，就是上面我提到过的lt那个jquery选择器了，我不说太多，真接上代码：

1             $("#gvE4 tr td").click(function(){
                $(this).parent().parent().find("tr:lt(11)").attr("style","height:28px;");
                $(this).parent().attr("style","height:28px;background-color:#DFF8FF; font-weight:bold;");
            });

有看懂那个find("tr:lt(11)")吗？先看看lt()的用法，直接翻译过来就是：选中前11个tr标签。为什么会是11呢？这个就是我上面说的不是一个一劳永逸的办法，首先，1是那个表格的标题行，而剩下的10是我的分页记录数，我设成是10了，所以前11的肯定不会选中那一行分页栏，至此，运行一下，嘿嘿，还有问题。。。单击分页栏时，还是会高亮显示，尼玛，这不白忙吗。。。于是一通检查，终于发现，第一句没事了，出事就出在第二句：它不会识别你当前点的是哪一行，还会自动着色，我了个去了，于是又陷入苦想，怎么样区别它呢？？？打开网页源代码发现，分页那一栏嵌入了一个一行N列的表格table，既然这样，哥哥又想到办法了，单击时，判断一下该行是不是有嵌一个表格来判断是否是分页栏位，如下：

            $("#gvE4 tr td").click(function(){
                $(this).parent().parent().find("tr:lt(11)").attr("style","height:28px;");
                if($(this).find("tr").length == 0 ){
                    $(this).parent().attr("style","height:28px;background-color:#DFF8FF; font-weight:bold;");
                }
            });

至此，整个功能做出来了，感觉又学到点东西了，先记下来，以后不会还能回过头来看看

 

PS：上面可能写得不算好，各位借鉴时请谨慎，另外，有砖丢砖，没砖打赏点也行~~

  

    <script language="javascript" type="text/javascript">
        $(document).ready(function(){
            $("#ShowListInfo").attr("style","display:none;");
            $("#btnBack").attr("style","display:none;");
//            $("#gvE4").find("tr").attr("onmousemove","c=this.style.backgroundColor;this.style.backgroundColor='#DFF8FF'");
//            $("#gvE4").find("tr").attr("onmouseout","this.style.backgroundColor=c");
            $("#gvE4 tr").hover(
                function(){$(this).addClass("hover");},
                function(){$(this).removeClass("hover");}
            );
            $("#gvE4 tr td").click(function(){
                //由于GridView是以10條記錄為一頁，算上表格標題和分頁的那一行的話，如果出現分頁，則本表格tr行數應超過11行，否則就沒有分行，故可以此作為一個判斷標准。
                $(this).parent().parent().find("tr:lt(11)").attr("style","height:28px;");
                if($(this).find("tr").length == 0 ){
                    $(this).parent().attr("style","height:28px;background-color:#DFF8FF; font-weight:bold;");
                }
            });
            
//            
//            $("#gvE4 tr td").click(function(){
//                var e = $(this).parent();              
//                $(this).parent().parent().find("tr").attr("style","border-color:White;border-width:0px;height:28px;");
//                $(this).parent().attr("style","border-color:White;border-width:0px;height:28px;background-color:#DFF8FF; font-weight:bold;");
//            });
            
        });
    </script>
    <style type="text/css">
        .hover{background-color:#DFF8FF; font-weight:bold;} /*这里是鼠标经过时的颜色*/
        #gvE4 table tr td
        {
            background-color:#FFFFFF;
            font-weight:normal;
        }
        th
        {
            background-color:#FFFFFF;
            background-image:url(images/win_top.png);
            height: 26px;
            font-weight:bold;
            color: #FFF;
        }
        .style1
        {
            width: 100%;
        }
    </style>