js加载表格数据

在JavaScript中加载表格数据通常涉及以下几个基础概念：

基础概念

DOM操作：文档对象模型（DOM）是HTML和XML文档的编程接口。JavaScript可以通过DOM API来查询和修改DOM树。
AJAX：异步JavaScript和XML，用于在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。
Fetch API：现代浏览器提供的用于替代XMLHttpRequest的接口，用于进行网络请求。
JSON：JavaScript对象表示法，常用于数据的序列化和传输。

类型

静态数据加载：直接在JavaScript代码中定义数据并填充到表格。
动态数据加载：通过AJAX或Fetch API从服务器获取数据并填充到表格。

应用场景

数据展示：如电商网站的商品列表、社交媒体平台的帖子列表等。
实时更新：如股票行情、实时聊天记录等。

示例代码

以下是一个使用Fetch API从服务器获取JSON数据并填充到HTML表格中的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load Table Data</title>
</head>
<body>
    <table id="dataTable" border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be loaded here -->
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    fetch('https://api.example.com/users') // 替换为实际的API地址
        .then(response => response.json())
        .then(data => {
            const tableBody = document.querySelector('#dataTable tbody');
            data.forEach(user => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.email}</td>
                `;
                tableBody.appendChild(row);
            });
        })
        .catch(error => console.error('Error fetching data:', error));
});