While making a table and inserting data in the table my data is not arranged inside the table the data is kept showing outside the table border and in unarranged form.
I am expecting my data in the table can be shown in arranged form where the table heading should be aligned with the matching data below the table
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Package Tracking - Admin</title>
</head>
<body>
<h1>Admin Page</h1>
<label for="packageIdAdmin">Package ID:</label>
<input type="text" id="packageIdAdmin">
<br>
<label for="status">Status:</label>
<input type="text" id="status">
<br>
<label for="location">Location:</label>
<input type="text" id="location">
<br>
<label for="estimatedDelivery">Estimated Delivery:</label>
<input type="text" id="estimatedDelivery">
<br>
<button onclick="addPackage()">Add Package</button>
<br><br>
<h2>List of Saved Packages</h2>
<button onclick="viewPackageList()">View Package List</button>
<div id="packageList"></div>
<script src="admin.js"></script>
</body>
</html>
These are the javascript codes
// Function to store package data
function storePackage(packageId, status, location, estimatedDelivery) {
const packageData = {
status: status,
location: location,
estimatedDelivery: estimatedDelivery
};
localStorage.setItem(packageId, JSON.stringify(packageData));
}
// Function to retrieve package data
function retrievePackage(packageId) {
const storedPackage = localStorage.getItem(packageId);
return storedPackage ? JSON.parse(storedPackage) : null;
}
// Function to add package by admin
function addPackage() {
const packageId = document.getElementById("packageIdAdmin").value.trim();
const status = document.getElementById("status").value.trim();
const location = document.getElementById("location").value.trim();
const estimatedDelivery = document.getElementById("estimatedDelivery").value.trim();
if (packageId && status && location && estimatedDelivery) {
storePackage(packageId, status, location, estimatedDelivery);
alert("Package added successfully!");
} else {
alert("Please fill in all fields.");
}
}
// Function to view list of saved packages by admin
function viewPackageList() {
const packageListDiv = document.getElementById("packageList");
packageListDiv.innerHTML = "";
packageListDiv.innerHTML += "<table border='1'><tr><th>Package ID</th><th>Status</th><th>Location</th><th>Estimated Delivery</th></tr>";
for (let i = 0; i < localStorage.length; i++) {
const packageId = localStorage.key(i);
const packageData = JSON.parse(localStorage.getItem(packageId));
packageListDiv.innerHTML += `
<tr>
<td>${packageId}</td>
<td>${packageData.status}</td>
<td>${packageData.location}</td>
<td>${packageData.estimatedDelivery}</td>
<br>
</tr>
`;
}
packageListDiv.innerHTML += "</table>";
}
The problem is that when you put HTML into innerHTML the system adds closing tags.
You can see this by using your browser devtools inspect facility.
Hence you are ending up with more than one table.
A simple way of preventing this automatic closure is to make a string of all the HTML and then copy the string into the innerHTML.
Here is the code (it cannot be a snippet as the snippet system does not allow access to local storage.)
Here's a snippet to show it works (with data in the code rather than from local storage).