名称
|
地址
|
距离
|
如何填充数据要填充表格中的数据,需要查询提供商或 API 来获取菜鸟驿站和药店的位置和距离信息。将这些信息存储在 JavaScript 变量中,然后使用 JavaScript 代码动态填充表格。以下是填充表格的示例 JavaScript 代码:
javascript
const stations = [{ name: "菜鸟驿站 1", address: "街道 1", distance: "0.5km" },{ name: "菜鸟驿站 2", address: "街道 2", distance: "1km" },{ name: "菜鸟驿站 3", address: "街道 3", distance: "1.5km" },
];const pharmacies = [{ name: "药店 1", address: "街道 1", distance: "0.2km" },{ name: "药店 2", address: "街道 2", distance: "0.7km" },{ name: "药店 3", address: "街道 3", distance: "1.2km" },
];const populateTable = (table, data) => {for (let item of data) {const row = document.createElement("tr");const nameCell = document.createElement("td");const addressCell = document.createElement("td");const distanceCell = document.createElement("td");nameCell.textContent = item.name;addressCell.textContent = item.address;distanceCell.textContent = item.distance;row.appendChild(nameCell);row.appendChild(addressCell);row.appendChild(distanceCell);table.appendChild(row);}
};populateTable(document.querySelector("table tbody"), stations);
populateTable(document.querySelectorAll("table")[1].querySelector("tbody"), pharmacies);