Question

情境： 我从外部json文件中获取数据，解析它，然后将其附加到使用footable jquery插件的HTML表中。

问题： 这是一个总的noob问题......但是有没有人知道（或者可以提供一个例子）如何使用javascript来解析那个json文件....并且取决于其中一个名称/值对的值，在表格中显示不同颜色的文字？目前，一切都以纯文本显示。

COPD_QUAL.MED_ASSESS是我希望根据值显示的对象。所以我需要像......那样的东西。

如果COPD_QUAL.MED_ASSESS ==＆＃34;轻度恶化＆＃34; ......以绿色，粗体显示

如果COPD_QUAL.MED_ASSESS ==＆＃34;中度恶化＆＃34; ......以黄色，粗体显示

如果COPD_QUAL.MED_ASSESS ==＆＃34;严重恶化＆＃34; ......以红色，粗体显示

以下是我目前将数据附加到表格的方式。任何人都可以帮助合并if / condition来完成上述任务吗？我是否需要在createPatientTable函数中添加它？

if (window.location.hostname == 'localhost') {
    console.log('local');
  $.ajax({
      type : 'GET',
      url  : 'json/gtw_copd_mpage3.json',
  dataType : 'json',
   success : function(json) {

        createPatientTable(json);
            },
            error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
  }
        });
}else{
    var getPatients = new XMLCclRequest();
    getPatients.onreadystatechange = function () {
        if (getPatients.readyState == 4 && getPatients.status == 200) {
            var json = $.parseJSON(getPatients.responseText);
            createPatientTable(json);
    };
}
};

});


function createPatientTable(json) {
$.each(json.LIST, function(i, COPD_QUAL) {
    $('.footable > tbody:last').append('<tr><td>' + COPD_QUAL.PATIENT + '</td><td>' + COPD_QUAL.FIN +'</td><td>' + COPD_QUAL.NURSE_UNIT + '</td><td>' + COPD_QUAL.ROOM + '</td><td>' + COPD_QUAL.BED +'</td><td>' + COPD_QUAL.ATTENDING_PHYS + '</td><td>' + COPD_QUAL.LENGTH_OF_STAY + '</td><td>' + COPD_QUAL.MED_ASSESS + '</td></tr>');
});
$('.footable').footable();
};

这是文件中的一个json数组：

{"COPD_QUAL":"15","LIST":[   {"PATIENT":"TEST, TRICKLE","FIN":"70100905","NURSE_UNIT":"TIC","ROOM":"C219","BED":"A","ATTENDING_PHYS":"LEVITEN , DANIEL L","LENGTH_OF_STAY":"161days 20:15:24","MED_ASSESS":"Mild exacerbation"}...

Answer 1

你能不能只添加一个将类附加到适当行的if条件：

var class = '';
if(COPD_QUAL.MED_ASSESS == "Mild exacerbation"){
    class = 'mild';
} else if (COPD_QUAL.MED_ASSESS == "Moderate exacerbation") {
    class = 'moderate';
} else if (COPD_QUAL.MED_ASSESS == "??? exacerbation") {
    class = 'severe';
}

然后将你的tr改为：

"<tr class="' + class + '">...

在CSS文件中设置.mild，.moderate，.severe的样式。

Answer 2

我的建议是这样的：

/* ... */
+ '</td><td>' + COPD_QUAL.LENGTH_OF_STAY + 
'</td><td class="assessment ' + getSeverity(COPD_QUAL.MED_ASSESS) + '">' + 
COPD_QUAL.MED_ASSESS + '</td></tr>')

与

getSeverity = (function() {
    var lookup = {
        "Mild exacerbation": "mild",
        "Moderate exacerbation": "moderate",
        "Severe exacerbation": "severe" // presumably you didn't mean two milds...
    };
    var defaultValue = "unknown"
    return function(assessment) {
        return lookup[assessment] || defaultValue;
    };
}());

和CSS一样：

.assessment {font-weight: bold;}
.mild {color: green;}
.moderate {color: yellow;}
.severe {color: red;}

如何根据值解析json并在HTML表中显示不同的颜色？

2 个答案: