Utilizing ajax technology, I aim to dynamically populate a div tag with values from a table. I believe that implementing a loop is crucial in this scenario, but the challenge lies in executing it correctly.
My current setup involves xampp for backend php development.
index.php
<li class="nav-item">
<a href="#" class="btn btn-info" role="button"
onclick="taskphp()">Tasks</a>
</li>
javascript.js
function taskphp() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("body").innerHTML = this.responseText;
let states = document.getElementsByClassName("state");
Array.from(states).forEach((state) => {
switch(state.innerHTML) {
case "fixed":
state.style.color = "green";
break;
case "fixing in progress":
state.style.color = "yellow";
break;
case "not fixed":
state.style.color = "red";
break;
default:
state.style.color = "white";
}
});
}
};
xhttp.open("GET", "IT/tasks.php", true);
xhttp.send();
}
tasks.php
<?php while($row = $result->fetch_assoc()) {
echo "<tbody><tr>";
echo "<td>".$row["task"]."</td>";
echo "<td>".$row["description"]."</td>";
echo "<td>".$row["task_objects"]."</td>";
echo "<td class=\"state\">".$row["state"]."</td>";
echo "<td>".$row["entrance_date"]."</td>";
echo "<td>".$row["execute_date"]."</td>";
echo "<td>".$row["source"]."</td>";
echo "<td>".$row["month"]."</td>";
echo "</tr></tbody>";
}
?>
With the help of a switch statement, I managed to alter the color of only the initial element in the collection. However, my goal is to dynamically adjust the colors of all elements based on their respective values.