如何基于xml节点的值分配类？

Question

I am using the for loop below to retrieve the data form a "x-ml" result set and I build at body out of the results. What I would like to do is assign a class to several rows based on the nodes value. For example:

-If Percent Reporting > 90% then assign class "green",

-If Percent Reporting > 70% and less than 90% then assign class "yellow",

-If Percent Reporting < 70% then assign class "red".

I was thinking I could analyze this while I was building the t body and assign the classes individually to each td or cell, but I'm not sure how to go about it.

Ultimately I want to conditional format three of my columns differently based on their values.

Any ideas or tips would be much appreciated.

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

Just calculate the class you want to add and add it to the row:

for (i = 0; i < x.length; i++) {
var percentReporting = x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue;
    var class = "";
    if(percentReporting > 90)
        class = "green";
    else if(percentReporting > 70)
        class = "yellow";
    else
        class = "red";

    tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue + 
    "</td><td class ='" + class +"'>" + 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 2

In your loop just create a variable for your class and use some if conditions to set the class.

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>";
    }