Question

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

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

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

Answer 1

让我们假设它看起来像

然后

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

并且您的javascript代码看起来像

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

    });

Answer 2

如果将AutoGenerateSelectButton属性设置为true，则可能是。

Answer 3

添加课程点击并在点击事件中切换它：

没有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/

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

3 个答案: