Привет, я пытаюсь добавить данные XML в табличное представление HTML с некоторыми динамическими цветами. Предположим, в приведенном ниже коде я только что отобразил заголовок столбца со страницы XML. Теперь я хочу видеть, что если данные столбца имеют текст «Hello», цвет текста должен отображаться в RED.
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
color:red;
}
th,td {
padding: 5px;
}
.tdRed {
height: 25px;
width: 25px;
background-color: red;
border-radius: 50%;
display: inline-block;
}
.td_blue{
color:blue;
}
.td_green{
color:green;
}
</style>
<body onload="loadDoc()">
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "https://cors-anywhere.herokuapp.com/https://www.javatpoint.com/xmlpages/emails.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Heading</th></tr>";
var x = xmlDoc.getElementsByTagName("email");
var y = xmlDoc.getElementsByTagName("heading");
for (i = 0; i <x.length; i++) {
if(x[i].getElementsByTagName("heading")[0].childNodes[0].nodeValue == "Hello"){
x[i].getElementsByTagName("heading")[0].className = 'tdRed';
}
table += "<tr><td>" +
x[i].getElementsByTagName("heading")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>