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>
原文地址:https://www.cnblogs.com/linyc/p/1996245.html