Question

当我点击一行gridview时，我想要改变它的颜色。在C＃中我有以下内容：

protected void Page_Load(object sender, EventArgs e) {
  if (!Page.IsPostBack) {
    GridView1.DataBind();
  }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
  e.Row.Attributes.Add("onclick", "ChangeRowColor('"+e.Row.ClientID +" ')");
}

在JavaScript中我有这个：

<script type="text/javascript">
    function ChangeRowColor(row) {
        //change the color of the current row to light yellow
        document.getElementById(row).style.backgroundColor = "#ffffda";
    }
</script>

我检查发送到JavaScript的gridview行的id是否为true，但该行的颜色没有变化！我怎样才能做到这一点？

Answer 1

检查TD的背景样式。最好使用类而不是内联，以便TD可以继承和更改：

<style> 
  tr.clicked {background-color: ffffda;} 
  tr.clicked td{ background: #fffda; }      
</style>  

 function ChangeRowColor(row) {
    document.getElementById(row).className= "clicked";     
 }

Answer 2

你可以做这样的事情

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
             e.Row.Attributes.Add("onclick", "this.style.backgroundColor='#ffffda'");

    }

Answer 3

所有这些都是很好的答案，但我会做什么（因为你还在使用javascript）是“jqueryfy”这到最大：P

在头部包含您的jquery脚本文件：

<script src="local path or cdn path"></script>

然后在表行上使用某种标识符（在此示例中使用类名，因为您使用的是GridView控件）

<RowStyle CssClass="rowstyle bg-changer" />
<AlternativeRowStyle CssClass="altrowstyle bg-changer" />

然后你可以创建你的jQuery函数来管理背景颜色变化

$(function(){
    $('.bg-changer').click(function(){
        $(this).addClass('selected');
    });
});

在您的样式表中，您可以很好地控制.bg-changer，.bg-changer .selected和您的两种行样式rowstyle和altrowstyle的样式，例如

.rowstyle .selected{ background: red; }
.altrowstyle .selected{ background: blue; }

如果您想更进一步，可以切换选定的课程

$(this).toggleClass('selected');

这样您就可以选择并取消选择一行。

Answer 4

将其更改为使用jQuery：

已更新，感谢@ocanals评论。（注意包含“＃”+）

<script type="text/javascript">
  function ChangeRowColor(row) {
    $("#"+row).css("backgroundColor","#ffffda");
  }
</script>

为什么gridview行的颜色没有变化？

4 个答案: