如何使用jQuery设置表格单元格的背景颜色答案

【问题标题】：How to set the background color of a table cell with jQuery如何使用jQuery设置表格单元格的背景颜色
【发布时间】：2010-11-24 20:35:50
【问题描述】：

我编写了一个 ASP.net 页面，该页面使用 ASP GridView 来显示数据表。

我想编写一些 JavaScript 将包含值“0”的每个单元格着色为红色。我想我可以使用 $("td").each 或 document.getElementsByTagName('td') 之类的东西。我有一些 CSS 我想应用到单元格以使它们变为红色。

如何使用 jQuery（或不使用 jQuery）来做到这一点？

【问题讨论】：

标签： asp.net jquery gridview

【解决方案1】：

jQuery 的 filter() 方法使这非常简短：

$("td").filter(function() {
    return $(this).text() == "0";
}).css("backgroundColor", "red");

或者使用 CSS 类：

$("td").filter(function() {
    return $(this).text() == "0";
}).addClass("YourRedClass");

【讨论】：

【解决方案2】：

$("td.td-in-grid-class").each(function() {
    if($(this).text() == "0") {
        $(this).attr("class", "red"); // assume you have css class named "red" 
        $(this).attr("style", "background-color:#ff0000;"); // alternative
    }
});

【讨论】：

考虑使用addClass() 和css() 而不是attr() 来执行此操作。这样一来，它就不会清除所有当前的类和样式。

【解决方案3】：

类似

$("td").toggleClass("my_css_class");

如果您只是在服务器端渲染生成的数据，那么我会在服务器端应用类而不是使用 javascript。

【讨论】：

我无法让它以我想要的服务器端方式呈现。我认为客户端可能会带来更好的灵活性。