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