Open javywithawhy opened 1 year ago
<html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } th { background-color: tomato; color: black; } </style> <script language="javascript"> window.addEventListener("load", readAll) function readAll() { fetch("http://localhost:7777/retrieve") .then(response => response.json()) .then(function(data) { var table = document.createElement("table"); var headerRow = table.insertRow(); var headers = ["PO Number", "Vendor", "Location Block", "Location Shelf", "Description"]; headers.forEach(function(header) { var headerCell = document.createElement("th"); headerCell.textContent = header; headerRow.appendChild(headerCell); }); data.forEach(function(row) { var dataRow = table.insertRow(); var poNumberCell = dataRow.insertCell(); poNumberCell.innerHTML = `<a href=delete-one.html?po_number=${row.po_number}>${row.po_number}</a>`; var vendorCell = dataRow.insertCell(); vendorCell.textContent = row.vendor; var locationBlockCell = dataRow.insertCell(); locationBlockCell.textContent = row.location_block; var locationShelfCell = dataRow.insertCell(); locationShelfCell.textContent = row.location_shelf; var descCell = dataRow.insertCell(); descCell.textContent = row.desc; }); document.body.appendChild(table); // Add back button event listener var backButton = document.getElementById("backButton"); backButton.addEventListener("click", function() { window.history.back(); }); }) } </script> </head> <body style="background-color:tomato;"> <h1 style="font-family:lato;">Minimal CRUD Delete User Interface</h1> <button id="backButton">Back</button> <div id="updateList"></div> </script> </head> <body style="background-color:tomato;"> </body> </html>```