Gridview点击一行变色

最新推荐文章于 2018-12-22 19:56:33 发布

Han_MoMo

最新推荐文章于 2018-12-22 19:56:33 发布

阅读量818

点赞数

分类专栏： .net 文章标签： gridview javascript 单击行变色

本文链接：https://blog.csdn.net/Han_MoMo/article/details/42555477

版权

.net 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

想要实现：gridview单击行1变色，单击行2变色，行1自动变回原色
用JS来实现

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script language="javascript" type="text/javascript">
        var oldRow = null;
        window.οnlοad=function()
        {
            var tblId = "<%=GridView1.ClientID %>";
            var tbl = $e(tblId);
            if(tbl!=null)
            {
                for(var i=1;i<tbl.rows.length;i++)
                {
                    tbl.rows[i].οnclick=new Function("clickRow(this)")
                }
            }
        }
         
        function clickRow(row)
        {
            var colorHighlt = "red";
            //alert(row.rowIndex);
            if(oldRow!=row)
            {
                if(oldRow!=null)//屏蔽掉这个if(oldRow!=null)后，实现效果：单击行1变色，单击行2变色，单击行1时，行1才变回原色，用户无论点击多少行都会变色，想变回原来颜色就点击该行
                {
                    oldRow.style.backgroundColor = "";
                }

                row.style.backgroundColor = colorHighlt;
            }else
            {
                row.style.backgroundColor=(row.style.backgroundColor==""?"red":"");
            }
             
            oldRow = row;
        }
         
        function $e(id)
        {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
   <asp:GridView runat="server" ID="GridView1" Width="50%"></asp:GridView>    
   </div>
    </form>
</body>
</html>