在 ajax 调用中更改“td”的背景颜色

Question

Below you see a ajax call that gets triggered when I press a button. Inside of the ajax call I append some'td' with value's to a table. On this line below: '</td><td>' + result[i].preRiskCategory + I'm trying to set the background color to a certain color when the value of preRiskCategory is above a certain number. Does anyone know if this is even possible and if so, how?

document.getElementById("searchButton").addEventListener("click", function (e) {
    // vorige resultaten leegmaken.
    clearTable();
    if (id != "") {
        $.post("/mainRiskanalysis/SearchMainRiskanalysisRisks?mainRiskanalysisId=" + id, function (result) {
            for (let i = 0; i < result.length; i++) {
                // Get risk-actionplan ids
                getRiskActionplanIds(result[i].id);
                // Looping through all ids and placing it in a string
                for (j = 0; j < ids.length; j++)
                    idsString+=ids[j] + ", ";
                 //Get the names by id's
                getZoneNameById(result[i].zoneId);
                getEquipmentNameById(result[i].equipmentId);
                getEquipmentTaskNameById(result[i].taskId);
                getDangerNameById(result[i].dangerId);
                getDangererousEnergieNameById(result[i].dangerousEnergiesId)
                getConsequenceNameById(result[i].consequenceId);
                // Getting the right table 
                var tbodyId = getTableId(result[i].categoryId);
                $(tbodyId).append(
                    '<tr scope="row"><td><a class="text-primary" href="/riskanalysis/edit/' + result[i].id + '">Edit</a> | <a class="text-danger" href="/riskanalysis/delete/' + result[i].id + '">Delete</a>' + 
                    '</td><td><a class="text-success" href="/riskActionPlan/create/' + result[i].id + '">Link actionplan</a>' +
                    '</td><td>' + idsString +
                    '</td><td style = "background-color: #C0C0C0">' + result[i].id +
                    '</td><td>' + zoneName +
                    '</td><td>' + equipmentName +
                    '</td><td>' + taskName +
                    '</td><td>' + result[i].activity +
                    '</td><td>' + result[i].action +
                    '</td><td>' + result[i].descriptionPotentialRisk +
                    '</td><td style="background-color: #99CC00">' + dangerName +
                    '</td><td>' + consequenceName +
                    '</td><td>' + dangerousEnergieName +
                    '</td><td style="background-color: #C0C0C0">' + result[i].preSeriousness +
                    '</td><td style="background-color: #C0C0C0">' + result[i].preProbability +
                    '</td><td style="background-color: #C0C0C0">' + result[i].preExposure +
                    '</td><td style="background-color: #C0C0C0">' + result[i].preRiskDegree +
                    '</td><td>' + result[i].preRiskCategory +
                    '</td><td>' + result[i].preventionMeasures +
                    '</td><td>' + result[i].safetyProcedures +
                    '</td><td>' + checkIfNull(result[i].postSeriousness) +
                    '</td><td>' + checkIfNull(result[i].postProbability) +
                    '</td><td>' + checkIfNull(result[i].postExposure) +
                    '</td><td>' + checkIfNull(result[i].postRiskDegree) +
                    '</td><td>' + checkIfNull(result[i].postRiskCategory) +
                    '</td><td>' + checkIfNull(result[i].improvementFactor) +
                    '</td><td>' + result[i].isOk +
                    '</td></tr>');
            }
        });
    } 
    e.preventDefault()
});

Please let me know if you need further explaination of some sort. Thanks!

Answer 1

Consider something like this:

  '</td><td style="background-color: #C0C0C0">' + result[i].preRiskDegree +
  '</td><td style="'+(

result[i].preRiskCategory > 100 ? 'background-color: orange;' : ''

)+'">' + result[i].preRiskCategory +
  '</td><td>' + result[i].preventionMeasures +

You can concatenate a string that is either a background-color or an empty style using a ternary condition. Whitespace added for clarity.