单击时更改行颜色 - ASP.NET 和 JavaScript答案

【问题标题】：Changing row color on click - ASP.NET and JavaScript单击时更改行颜色 - ASP.NET 和 JavaScript
【发布时间】：2013-12-05 19:48:34
【问题描述】：

使用e.Row.Attributes.Add("onclick", "this.style.backgroundColor='yellow'");，我可以在 ASP.NET GridView 中通过鼠标单击突出显示选择。

这可行，但是，被点击的每一行的背景颜色都会改变，如果我点击另一行，之前点击的行仍然突出显示。

有什么办法可以解决这个问题，即重置所有其他行并仅突出显示当前选中的行？

【问题讨论】：

标签： javascript html asp.net gridview background-color

【解决方案1】：

假设它看起来像

然后

e.Row.Attributes.Add("class", "colorchange");

你的 javascript 代码看起来像

 $('.colorchange').click(function()
    {
    $('.colorchange').backgroundColor="";
    $(this).backgroundColor="your color name";

    });

【讨论】：

【解决方案2】：

如果您将 AutoGenerateSelectButton 属性设置为 true，那么它是可能的。

【讨论】：

【解决方案3】：

添加类 clicked 并在点击事件上切换它：

No JQuery：
服务器端：

e.Row.Attributes.Add("onclick", "Click(this)");

客户端：

Click = function(el) {
    var clicked = document.querySelectorAll(".clicked");
    for (var i = 0, length = clicked.length; i < length; i++) {
        removeClass(clicked[i], "clicked");
    }

    el.className = el.className + "clicked";
}

http://jsfiddle.net/Cd2Q9/11/

JQuery：
服务器端：

e.Row.Attributes.Add("class", "clickable");

客户端：

$(".clickable").click(function() {
    $(".clicked").removeClass("clicked");
    $(this).addClass("clicked");
});

http://jsfiddle.net/aB5cm/

【讨论】：