Question
Answer and Explanation
To fill an order details table with random data, you can use JavaScript. Here's a detailed approach with an example, suitable for a front-end context:
1. HTML Structure: First, ensure your HTML table has the necessary structure (e.g., headers and a <tbody> element where data will be inserted).
2. JavaScript Function: Write a JavaScript function to generate random data. This function will create objects representing order details.
3. Populating the Table: Finally, this function will loop through the generated order details and create table rows, adding each to the table's <tbody>.
4. Example Implementation:
function generateRandomOrderData(numberOfOrders) {
const orderData = [];
const items = ["Laptop", "Keyboard", "Mouse", "Monitor", "Webcam", "Headphones"];
const names = ["Alice Smith", "Bob Johnson", "Charlie Brown", "Diana Miller", "Eve Davis"];
for (let i = 0; i < numberOfOrders; i++) {
const randomItemIndex = Math.floor(Math.random() items.length);
const randomNameIndex = Math.floor(Math.random() names.length);
const quantity = Math.floor(Math.random() 5) + 1; // Random quantity between 1 and 5
const price = (Math.random() 100 + 20).toFixed(2); // Random price between 20 and 120
orderData.push({
"orderId": Math.floor(Math.random() 100000),
"customerName": names[randomNameIndex],
"item": items[randomItemIndex],
"quantity": quantity,
"price": price,
"total": (quantity parseFloat(price)).toFixed(2),
});
}
return orderData;
}
function populateTable(orderData) {
const tableBody = document.querySelector("#orderTable tbody");
orderData.forEach(order => {
const row = tableBody.insertRow();
row.insertCell().textContent = order.orderId;
row.insertCell().textContent = order.customerName;
row.insertCell().textContent = order.item;
row.insertCell().textContent = order.quantity;
row.insertCell().textContent = order.price;
row.insertCell().textContent = order.total;
});
}
document.addEventListener("DOMContentLoaded", function() {
const numberOfOrders = 10;
const orderData = generateRandomOrderData(numberOfOrders);
populateTable(orderData);
});
To use the code provided, it must be integrated into an HTML file that contains a table with the ID of "orderTable", and a <tbody> element. Below is an example of a full html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Details</title>
</head>
<body>
<table id="orderTable">
<thead>
<tr>
<th>Order ID</th>
<th>Customer Name</th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
function generateRandomOrderData(numberOfOrders) {
const orderData = [];
const items = ["Laptop", "Keyboard", "Mouse", "Monitor", "Webcam", "Headphones"];
const names = ["Alice Smith", "Bob Johnson", "Charlie Brown", "Diana Miller", "Eve Davis"];
for (let i = 0; i < numberOfOrders; i++) {
const randomItemIndex = Math.floor(Math.random() items.length);
const randomNameIndex = Math.floor(Math.random() names.length);
const quantity = Math.floor(Math.random() 5) + 1; // Random quantity between 1 and 5
const price = (Math.random() 100 + 20).toFixed(2); // Random price between 20 and 120
orderData.push({
"orderId": Math.floor(Math.random() 100000),
"customerName": names[randomNameIndex],
"item": items[randomItemIndex],
"quantity": quantity,
"price": price,
"total": (quantity parseFloat(price)).toFixed(2),
});
}
return orderData;
}
function populateTable(orderData) {
const tableBody = document.querySelector("#orderTable tbody");
orderData.forEach(order => {
const row = tableBody.insertRow();
row.insertCell().textContent = order.orderId;
row.insertCell().textContent = order.customerName;
row.insertCell().textContent = order.item;
row.insertCell().textContent = order.quantity;
row.insertCell().textContent = order.price;
row.insertCell().textContent = order.total;
});
}
document.addEventListener("DOMContentLoaded", function() {
const numberOfOrders = 10;
const orderData = generateRandomOrderData(numberOfOrders);
populateTable(orderData);
});
</script>
</body>
</html>
This JavaScript code will generate and display 10 random order records in your HTML table when the page loads. Make sure the <table> element in your HTML has the id="orderTable" and a <tbody> for dynamic updates to be correctly applied.