I would like to change the background color of my systems's status. For example if it online return td background color green, offline red, else orange. I am using for loop (dynamic json array from url) so my results are not static, the system might be online now then offline after hour. So this is my code, script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: 'http://localhost/api/job/',
dataType: 'JSON',
success: function (data) {
for (var i = 0; i < data.length; i++) {
$(document).ready(function () {
var content = ''
data.forEach(item => {
content += "<tr><td class='" + item.system_status.toLowerCase() + "'>" + item.system_status + "</td></tr>"
if (item.system_status.toLowerCase().indexOf('online') === 0) {
} else if (item.system_status.toLowerCase().indexOf('offline') === 0) {
} else if (item.system_status.toLowerCase().indexOf('down') === 0) {
}
})
$('#table_body').html(content);
})
}
}
});
});
</script>
and this is my html:
<style>
td.online {
background-color: #a4bc31;
}
td.offline {
background-color: #bc3131;
}
td.down {
background-color: yellow;
}
</style>
</body>
<table>
<tbody id='table_body'></tbody>
</table>
what I am doing wrong??
and it is still the same, only the online and the offline is colored.
You can try the below method to add background-color to the cells contains the status of system.
Add a class name to the cell while appending the same to DOM, and change the background-color using the same class name.
$(document).ready(function () {
$.ajax({
url: "http://localhost/api/job/",
dataType: "JSON",
success: function (data) {
for (var i = 0; i < data.length; i++) {
$(document).ready(function () {
var content = "";
data.forEach((item) => {
var class_name = "";
if (item.system_status.toLowerCase().indexOf("online") === 0) {
class_name = "online";
} else if (
item.system_status.toLowerCase().indexOf("offline") === 0
) {
class_name = "offline";
} else if (item.system_status.toLowerCase().indexOf("down") === 0) {
class_name = "down";
}
content +=
"<tr><td class='" +
class_name +
"'>" +
item.system_status +
"</td></tr>";
});
$("#table_body").html(content);
});
}
},
});
});table, td {
border: 1px solid #ddd;
border-collapse: collapse;
}
td.online, td.offline, td.down {
color: #fff;
}
td.online {
background-color: green;
}
td.offline {
background-color: orange;
}
td.down {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody id='table_body'></tbody>
</table>EDIT
Have updated the HTML the way response is received and DOM is updated.
EDIT-2
I have added another array called status. Once you receive the response data from API, you can check the received status with the status array, as follows:
status[data.system_status]
So it will return the corresponding class name.
EDIT-3
Since there are lots of possibilities that a status can be, we are planning on a if-else condition, as follows:
if(data.system_status.toLowerCase().indexOf('online') === 0) {
// Add class 'online' to the cell
} else if(data.system_status.toLowerCase().indexOf('offline') === 0) {
// Add class 'offline' to the cell
} else if(data.system_status.toLowerCase().indexOf('down') === 0) {
// Add class 'down' to the cell
}
EDIT-4
Updated the answer based on the update in the question snippet
I don't really know how this logic could be written in Django but I've tried below. See if this helps.
<table>
<tr>
<th> System Name </th>
<th> System Status</th>
</tr>
</tr>
{% for i in response %}
{% if i.system_status == 'ONLINE' %}
{% bgcolor = 'green' %}
{% elif i.system_status == 'OFFLINE' %}
{% bgcolor = 'red' %}
{% else %}
{% bgcolor = 'orange' %}
{% endif %}
<tr>
<td> {{ i.system_name }}</td>
<td style="background:{{ bgcolor }}"> {{ i.system_status }}</td>
</tr>
{% endfor %}
</table>
I agree with the other users that it would be easier for you to add class information to the cell in PHP, but if you want to add the classes to the status cell after the page has been rendered you can use native JS to iterate over the rows.
// Cache the rows in the table body
const rows = document.querySelectorAll('tbody tr');
// Iterate over them
rows.forEach(row => {
// Grab the second cell (status)
const status = Array.from(row.querySelectorAll('td'))[1];
// And depending on the text content add
// the appropriate class to the cell
switch(status.textContent) {
case 'Online': status.classList.add('online'); break;
case 'Offline': status.classList.add('offline'); break;
default: status.classList.add('other'); break;
}
});.online { background-color: green; }
.offline { background-color: red; }
.other { background-color: orange };<table>
<thead>
<tr><th>System Name</th><th>System Status</th></tr>
</thead>
<tbody>
<tr><td>Bob</td><td>Online</td></tr>
<tr><td>Sally</td><td>Offline</td></tr>
<tr><td>Steve</td><td>Billy Joel</td></tr>
</tbody>
</table>