Question

在下面，您会看到一个Ajax调用，当我按下一个按钮时就会触发该调用。在ajax调用中，我在表中附加了带有值的“ td”。在下面的这一行上：'</td><td>' + result[i].preRiskCategory +，当preRiskCategory的值大于某个数字时，我试图将背景色设置为某种颜色。有谁知道这是否可能，如果可以，怎么办？

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()
});

如果您需要进一步的说明，请告诉我。谢谢！

Answer 1

考虑这样的事情：

  '</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 +

您可以使用三元条件连接背景颜色或空样式的字符串。为了清楚起见添加了空格。

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

1 个答案: