Question

我有一个用jquery Mobile构建的HTML页面，它使用AJAX，JSON和php从数据库中提取数据。然后循环遍历数据库/表，并填充表。一切都在努力，并在那里进展顺利。但是，一旦填充了表数据单元，我似乎无法弄清楚如何更改表数据单元格背景颜色。 IE：对于表中的每个记录，一旦代码完成，就会有一个“状态”TEXT字段，其文本值为“RUNNING”或“CANCELED”。我希望细胞表示运行或取消，为绿色或红色，取决于值。红色为取消，绿色为跑步。如果您能提供帮助，请告诉我。该表由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>");      
    }

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

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

Answer 2

您可以根据您的值（“RUNNING”或“CANCELLED”）动态应用class属性。
由于您使用的是<table>元素和jQuery，因此它可能如下所示：

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

FIDDLE EXAMPLE

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

2 个答案: