63 lines
1.4 KiB
JavaScript
63 lines
1.4 KiB
JavaScript
|
|
const tbl = document.createElement("table");
|
|
const tblBody = document.createElement("tbody");
|
|
|
|
|
|
fetch("gget.php")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
generateTable(data);
|
|
})
|
|
|
|
|
|
function generateTable(data) {
|
|
|
|
const row = document.createElement("tr");
|
|
|
|
data.forEach( element => {
|
|
|
|
for (const [key, value] of Object.entries(element)) {
|
|
|
|
const cell = document.createElement("td");
|
|
|
|
if (key == "b") {
|
|
// console.log(`${key}: ${value}`);
|
|
|
|
const cellText = document.createTextNode(`${value} `);
|
|
cell.appendChild(cellText);
|
|
row.appendChild(cell);
|
|
|
|
}
|
|
if (!isNaN(value) && value > 10) {
|
|
cell.classList.add("hover-effect");
|
|
}
|
|
}
|
|
|
|
tblBody.appendChild(row);
|
|
|
|
tbl.appendChild(tblBody);
|
|
document.body.appendChild(tbl);
|
|
|
|
tbl.setAttribute("border", "2");
|
|
|
|
})
|
|
|
|
// console.log("hello")
|
|
}
|
|
|
|
|
|
const style = document.createElement('style');
|
|
|
|
style.innerHTML = `
|
|
.hover-effect {
|
|
// background-color: lightblue;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.hover-effect:hover {
|
|
background-color: yellow;
|
|
}
|
|
`;
|
|
|
|
document.head.appendChild(style);
|