如何使用 Javascript 更改 ASP.NET Gridview 的 cssClass？答案

【问题标题】：How can I change an ASP.NET Gridview's cssClass with Javascript?如何使用 Javascript 更改 ASP.NET Gridview 的 cssClass？
【发布时间】：2012-10-02 15:59:33
【问题描述】：

我想访问 asp.net gridview 的 cssClass 属性并用 Javascript 更改它。

我知道我可以像这样访问其他单独的样式属性：

document.getElementById('<%=GridView1.ClientID%>').style

但我特别想更改 cssClass。这是我尝试第一个建议后的结果。它目前还不起作用。我将您给我的那行放在突出显示选定行的函数的第一部分中，以便所有先前突出显示的行都将恢复为正常样式。想法？

function ChangeRowColor(rowID) {
    document.getElementById('<%=gvxTaskList.ClientID%>').className += "tablestyle";

    var color = document.getElementById(rowID).style.backgroundColor;
    if (color != 'yellow')
        oldColor = color;
    if (color == 'yellow')
        document.getElementById(rowID).style.backgroundColor = oldColor;
    else document.getElementById(rowID).style.backgroundColor = 'yellow';
}

【问题讨论】：

抱歉！我可能需要更改 altrowstyle 和 rowstyle。那么我该如何实现呢？
.className += "tablestyle" 只会在第一次工作，再次调用该函数会关闭 css。为什么？ class="tablestyletablestyle"。 TableStyle 两次成为另一个类的名称。我会更新我的答案以迎合这一点

标签： c# javascript asp.net gridview

【解决方案1】：

试试这个

document.getElementById('<%=GridView1.ClientID%>').className = "class";

并添加到现有的类

document.getElementById('<%=GridView1.ClientID%>').className += " class";

更新

function addClass()
{
    var exClass = document.getElementById('<%=GridView1.ClientID%>').className;

    if(exClass.indexOf('className') == -1)  //check that the class does not already exist
    {
        if(exClass.length == 0)
           document.getElementById('<%=GridView1.ClientID%>').className += 'className'; //add
        else
           document.getElementById('<%=GridView1.ClientID%>').className += ' className'; //append
    }
}

【讨论】：

【解决方案2】：

asp.net 中的 cssClass 将简单地转换为客户端 html 中的类，例如，.net 端的代码如下：

<asp:datagrid id="myGrid" cssClass="myClass" runat=server></asp:datagrid">

将大致翻译成：

<table id="someRandomIdOrClientIdThatYouSet" class="myClass"><tr>....</tr></table>

所以要实现你想要的，在javascript中，你可以改变它：

document.getElementById('<%=GridView1.ClientID%>').className = "newClassName";

或者使用像 jQuery 这样的库：

$('#<%=GridView1.ClientID%>').addClass("newClassName")

【讨论】：

【解决方案3】：

  document.getElementById('<%=GridView1.ClientID%>').className += "class";

【讨论】：

我把你给我的那一行放在一个函数的第一部分，它突出显示选定的行，以便所有以前突出显示的行都恢复到正常样式；然而，这并没有奏效。由于空间有限，我发布了上面的代码