html 请求数据与表格动态添加数据
以下是一个简单的HTML页面示例，使用JavaScript从服务器请求数据，并将数据动态添加到表格中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Table Example</title>
<script>
function fetchData() {
fetch('your-data-endpoint') // 替换为你的数据接口URL
.then(response => response.json())
.then(data => {
const table = document.getElementById('data-table');
data.forEach(row => {
const tr = document.createElement('tr');
for (const [index, cell] of row.entries()) {
const td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
}
table.appendChild(tr);
});
})
.catch(error => console.error('Error fetching data: ', error));
}
</script>
</head>
<body onload="fetchData()">
<table id="data-table" border="1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<!-- 动态添加行 -->
</tbody>
</table>
</body>
</html>在这个示例中，当页面加载完成后，fetchData函数会被调用，它通过fetch函数向服务器请求数据。假设服务器返回的是JSON格式的数据数组，每个数据项都是一个包含列数据的数组。然后，这些数据被用于动态创建表格行(tr)和单元格(td)，并添加到表格中。
请注意，你需要替换your-data-endpoint为实际提供数据的服务器接口URL。
评论已关闭