英文:
How to create an auto-refreshing table?
问题
我创建了一个HTML页面，我在其中加载了CSV文件（其中数据已经以表格形式存在），并重新创建了表格，要更新它，我必须每天加载文件。
如何使这个表格自动更新，而不需要我每天加载文件？
这是代码：
英文:
I created an html page where I load the csv file(where the data is already in a table) and it recreates the table and to update it I have to load the file every day.
How do I update this table automatically without me loading the file every day?
this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial=1.0">
<title>Pricelist</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="table"></div>
<script>
let table = document.querySelector(".table");
(
async()=>{
let workbook = XLSX.read(await(await fetch("./excel/ProdottiEstero0707.xlsx")).arrayBuffer());
console.log(workbook);
let worksheet = workbook.SheetNames;
worksheet.forEach(name=>{
let html = XLSX.utils.sheet_to_html(workbook.Sheets[name]);
table.innerHTML += `
<img src="atomiclogo02.png" width=50 height=50/> &nbsp <h3 style="display: inline-block;">Pricelist 07/07/2023</h3><br>${html}`
})
}
)()
</script>
</body>
</html>
答案1
得分: 0
为了在不手动每天加载文件的情况下自动更新表格，您可以使用JavaScript周期性地获取文件并更新表格内容。以下是如何实现这一目标的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial=1.0">
<title>Pricelist</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="table"></div>
<script>
let table = document.querySelector(".table");
async function updateTable() {
let workbook = XLSX.read(
await (await fetch("./excel/ProdottiEstero0707.xlsx")).arrayBuffer()
);
console.log(workbook);
let worksheet = workbook.SheetNames;
table.innerHTML = ""; // 清除表格内容以便更新
worksheet.forEach((name) => {
let html = XLSX.utils.sheet_to_html(workbook.Sheets[name]);
table.innerHTML += `
<img src="atomiclogo02.png" width=50 height=50/>  
<h3 style="display: inline-block;">Pricelist 07/07/2023</h3><br>
${html}`;
});
}
// 每天更新一次表格（根据需要调整时间间隔）
setInterval(updateTable, 24 * 60 * 60 * 1000); // 24小时
// 初始更新
updateTable();
</script>
</body>
</html>
在此示例中，updateTable 函数获取文件、读取工作簿并更新表格内容。setInterval 函数用于每隔24小时调用 updateTable 函数（根据需要调整时间间隔）。另外，表格在页面加载后立即进行初始更新。
英文:
To update the table automatically without manually loading the file every day, you can use JavaScript to fetch the file periodically and update the table content. Here's an example of how you can achieve this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial=1.0">
<title>Pricelist</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="table"></div>
<script>
let table = document.querySelector(".table");
async function updateTable() {
let workbook = XLSX.read(
await (await fetch("./excel/ProdottiEstero0707.xlsx")).arrayBuffer()
);
console.log(workbook);
let worksheet = workbook.SheetNames;
table.innerHTML = ""; // Clear the table before updating
worksheet.forEach((name) => {
let html = XLSX.utils.sheet_to_html(workbook.Sheets[name]);
table.innerHTML += `
<img src="atomiclogo02.png" width=50 height=50/> &nbsp
<h3 style="display: inline-block;">Pricelist 07/07/2023</h3><br>
${html}`;
});
}
// Update the table every day (adjust the interval as needed)
setInterval(updateTable, 24 * 60 * 60 * 1000); // 24 hours
// Initial update
updateTable();
</script>
</body>
</html>
In this example, the updateTable function fetches the file, reads the workbook, and updates the table content. The setInterval function is used to call the updateTable function every 24 hours (adjust the interval as needed). Additionally, the table is initially updated immediately after the page loads.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论