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

Changing row color on click - ASP.NET and JavaScript

本文关键字：-ASP NET JavaScript 颜色 单击      更新时间：2023-09-26

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

然而，这是可行的，单击的每一行的背景色都会发生变化，如果我单击另一行，则先前单击的行将保持高亮显示。

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

让我们假设它看起来像

然后

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

您的javascript代码将看起来像

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

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

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

无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/

相关文章：