javascript - 如何根据 xml 节点的值分配一个类？

Question

我正在使用下面的 for 循环从“x-ml”结果集中检索数据，并根据结果构建一个 t 主体。我想做的是根据节点值将一个类分配给几行。例如:

-如果报告百分比 > 90%，则分配“绿色”类，

-如果报告百分比 > 70% 且小于 90%，则分配“黄色”类，

-如果百分比报告 < 70%，则分配“红色”类。

我想我可以在构建 t 主体并将类单独分配给每个 t d 或单元格时对此进行分析，但我不确定如何去做。

最终，我想根据它们的值以不同的方式对我的三个列进行条件格式化。

如有任何想法或提示，我们将不胜感激。

for (i = 0; i < x.length; i++) {
    tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue + 
    "</td><td>" + x[i].getElementsByTagName("TotalUnits")[0].childNodes[0].nodeValue +
    "</td><td>" + x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue +
    "</td><td>" + x[i].getElementsByTagName("PercentNotReporting")[0].childNodes[0].nodeValue +
    "</td><td>" + x[i].getElementsByTagName("PercentBypassed")[0].childNodes[0].nodeValue +
    "</td><td>" + x[i].getElementsByTagName("NumberLogins")[0].childNodes[0].nodeValue +
    "</td><td>" + x[i].getElementsByTagName("NumberAlarms")[0].childNodes[0].nodeValue +
    "</td><td>" + x[i].getElementsByTagName("TotalEnergySavings")[0].childNodes[0].nodeValue +
    "</td></tr>";
}

Answer 1

在您的循环中，只需为您的类创建一个变量并使用一些 if 条件来设置类。

for (i = 0; i < x.length; i++) {
        var statusClass = 'good', //default value
            percentReporting = parseFloat(x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue);

        if (percentReporting < 70)
            statusClass = 'bad';
        else if (percentReporting < 90 && percentReporting > 70)
            statusClass = 'warning';

        tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue +
            "</td><td>" + x[i].getElementsByTagName("TotalUnits")[0].childNodes[0].nodeValue +
            "</td><td class='" + statusClass + "'>" + percentReporting +
            "</td><td>" + x[i].getElementsByTagName("PercentNotReporting")[0].childNodes[0].nodeValue +
            "</td><td>" + x[i].getElementsByTagName("PercentBypassed")[0].childNodes[0].nodeValue +
            "</td><td>" + x[i].getElementsByTagName("NumberLogins")[0].childNodes[0].nodeValue +
            "</td><td>" + x[i].getElementsByTagName("NumberAlarms")[0].childNodes[0].nodeValue +
            "</td><td>" + x[i].getElementsByTagName("TotalEnergySavings")[0].childNodes[0].nodeValue +
            "</td></tr>";
    }