根据单元格中的数据库数据更改表格数据单元格的颜色答案

【问题标题】：Change color of Table Data cell, based on the Database Data in Cell根据单元格中的数据库数据更改表格数据单元格的颜色
【发布时间】：2013-04-16 06:23:47
【问题描述】：

我有一个内置在 jquery Mobile 中的 HTML 页面，它使用 AJAX、JSON 和 php 从数据库中提取数据。然后它遍历数据库/表，并填充表。一切正常，一切顺利。但是，一旦填充了表格数据单元格，我似乎无法弄清楚如何更改表格数据单元格背景颜色。 IE：对于表中的每条记录，一旦代码完成，就有一个“状态”文本字段，其文本值为“正在运行”或“取消”。我希望显示“正在运行”或“已取消”的单元格为绿色或红色，具体取决于值。红色表示已取消，绿色表示正在运行。如果你能帮忙，请告诉我。该表由 AJAX、JSON、PHP MYSQL 数组填充，因此我的表的输出如下所示：

for(var i = 0; i < data.length; i++) {
     $('#output').append("<table width=100%><tr><td width=20%><b>"+data[i][1]+"</b></td><td width=20%><b>"+data[i][8]+"</b></td><td width=20%><b>"+data[i][2]+"</b></td><td class=statusClass width=20%><b>"+data[i][3]+"</b></td><td width=20%><b>"+data[i][4]+"</b></td></tr></table>");      
    }

如果您想查看此页面的所有代码，请告诉我。

【问题讨论】：

标签： jquery json

【解决方案1】：

试试这个：

$("#output td:contains(RUNNING)").attr("style","background-color:green");
$("#output td:contains(CANCELLED)").attr("style","background-color:red");

jsFiddle：http://jsfiddle.net/hescano/LfnQs/

【讨论】：

我想再问一个问题 Hanlet Escano，如果你不介意的话......我的嵌套循环运行良好，单元格的着色现在效果惊人，但我还有一个更快问题，如您所见，基于此代码，对于每个循环运行，我的代码都会创建一个新表，我认为在我的中创建一个新行会更有效，这里是代码：

这里不要贴代码，创建一个jsFiddle并分享URL。

【解决方案2】：

您可以根据您的值（“RUNNING”或“CANCELLED”）即时应用class 属性。
由于您使用的是 <table> 元素和 jQuery，它可能看起来像这样：

$row = $('<tr />');
$row.append($('<td />', {
    text: item[1],
    class: item[0]
}));
$('#sampleTable').append($row);

FIDDLE EXAMPLE

【讨论】：