修改前
return rows;
function renderRows() {
rowsElement.replaceChildren();
修改後
return rows.map((row, index) => ({
id: row.id ?? index + 1,
name: String(row.name || "未命名"),
price: Number(row.price) || 0,
}));
function createRowCard(row) {
const card = document.createElement("article");
card.className = "item-card";
const title = document.createElement("h2");
title.textContent = row.name;
const price = document.createElement("p");
price.textContent = `$${row.price}`;
card.append(title, price);
return card;
function renderRows(rows) {
if (rows.length === 0) {
const emptyMessage = document.createElement("p");
emptyMessage.className = "empty-state";
emptyMessage.textContent = "目前沒有試算表資料。";
rowsElement.replaceChildren(emptyMessage);
return;
}
rowsElement.replaceChildren(...rows.map(createRowCard));
}