制作一个静态页面;显示一个表格,标题是“测试目录”,表格数据是指定目录下的文件夹,表格高度是文件夹的数量,且每次打开都动态刷新一遍文件夹数量
时间: 2024-04-08 12:30:34 浏览: 20
以下是一个简单的静态页面示例,用于显示指定目录下的文件夹列表,并动态刷新文件夹数量:
```html
<!DOCTYPE html>
<html>
<head>
<title>测试目录</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h1>测试目录</h1>
<table id="folderTable">
<thead>
<tr>
<th>文件夹名称</th>
</tr>
</thead>
<tbody id="folderList"></tbody>
</table>
<script>
function refreshFolderCount() {
fetch('/path/to/server-script.php')
.then(response => response.json())
.then(data => {
const folderList = document.getElementById('folderList');
folderList.innerHTML = ''; // 清空表格内容
data.forEach(folder => {
const row = document.createElement('tr');
const folderNameCell = document.createElement('td');
folderNameCell.textContent = folder;
row.appendChild(folderNameCell);
folderList.appendChild(row);
});
})
.catch(error => {
console.error(error);
});
}
// 页面加载完成后刷新文件夹数量
document.addEventListener('DOMContentLoaded', refreshFolderCount);
</script>
</body>
</html>
```
请将 `/path/to/server-script.php` 替换为您服务器端脚本的实际路径。此页面将在加载时调用服务器端脚本获取文件夹列表,并将其显示在表格中。每次打开页面时,文件夹数量都会动态刷新。您可以根据需要自定义样式和其他功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)