Question

我试图通过根据json值更改颜色表格单元格背景来显示客户端的状态（向上或向下）：

[{
    "client": "client1",
    "ip": "127.0.0.1",
    "status": "up"
}, {
    "client": "client2",
    "ip": "127.0.0.2",
    "status": "up"
}]

到目前为止我的尝试：

<script>
$.getJSON("<webaddress>/clients.json",
function (data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].client + "</td>");
        $('table').append(tr);


        if(data[i].status == "up")
        {
          $('td').css ('background-color', 'green');
         } else {
          $('td').css('background-color', 'red');
         };    

}


});


</script>

<style type="text/css">

.table {
  width: 300px !important;
}

</style>

<div>
<table class="table">
    <tr>
        <th>Clients</th>
    </tr>
</table>
</div>

当状态为up时，单元格背景保持绿色，但即使我将一个状态更改为down，也会将所有单元格背景变为红色。我知道它可能是显而易见的东西，但它并没有帮助我的js知识不那么好。

Answer 1

Yeap，通过该代码

$('td').css ('background-color', 'green');

你所有的TD都是绿色的。

要为所需的颜色添加颜色，您需要将其更改为

$('td',tr).css ('background-color', 'green');

Answer 2

您正在使用$('td')，这意味着文档中的所有td标记都将其更改为tr.find('td')还有许多其他方法可以执行此操作。希望它对你有用

使用javascript根据json值更改表格单元格背景颜色

2 个答案: