GridView控件双击某行变色【整理】

方法一：

1、在 GridView1_RowDataBound 事件中添加:

{

  e.Row.ID = "tr_" + ((int)ViewState["rowID"]);

  e.Row.Attributes.Add("style", "background-color:#FFFFFF;");

  e.Row.Attributes.Add("ondblclick", "setValueByTr(this);");

  ViewState["rowID"] = ((int)ViewState["rowID"]) + 1;

}

2、在 Page_Load 事件中添加:

{

　　if (!IsPostBack)

    {

     　　ViewState["rowID"] = 1;

　　}

}

3、页面加上js代码:

<script type="text/javascript" language="javascript">

        var par = "";

        function setValueByTr(obj) {

            var trid = obj.id;

            if (par == "" || par == trid) {

                document.getElementById(trid).style.backgroundColor = "#6699ff";

                par = obj.id;

            } else {

                document.getElementById(par).style.backgroundColor = "#FFFFFF";

                document.getElementById(trid).style.backgroundColor = "#6699ff";

                par = obj.id;

            }

        }

</script>

这种方法有个缺陷，就是如果gridview的行有编辑、删除或浏览等事件，那么这些按钮需要点击两次才会执行，而且该行双击后的背景色会丢失。

下面这个是改良版，非原创，是网上搜到的：

方法二：

1、在 GridView1_RowDataBound 事件中添加:

 {

　　e.Row.Attributes["class"] = "trpp";

　　e.Row.Attributes.Add("ondblclick", "setValueByTr(this)");

 }

2、不需要

3、页面加上js代码:

<script type="text/javascript" language="javascript">

//获取所有class

function getElementsByClassName(n) {

　　var classElements = [], allElements = document.getElementsByTagName('*');

　　for (var i = 0; i < allElements.length; i++) {

　　　　if (allElements[i].className == n) {

　　　　　　classElements[classElements.length] = allElements[i];

　　　　}

　　}

　　return classElements;

}

//先全部取消再给当前赋值

function setValueByTr(obj) {

　　var redClassElements = getElementsByClassName('trpp');

　　for (var i = 0; i < redClassElements.length; i++) {

　　　　redClassElements[i].style.backgroundColor = "#fff";

　　}

　　obj.style.backgroundColor = "#6699ff";

}

</script>