Js: 读取数据并动态生成表格（读取新数据时，应该删除之前已经渲染出来的数据）

**JS读取数据并动态生成表格**

在前端开发中，经常需要读取后台提供的数据，并根据这些数据动态生成表格。这种需求在数据展示、统计分析等方面非常普遍。在本文中，我们将介绍如何使用 JavaScript 来读取数据并动态生成表格。

###1. 数据准备首先，我们需要准备好要读取的数据。假设我们有一个 JSON 文件，包含了我们想要显示的数据：

json{
 "data": [
 {
 "id":1,
 "name": "John",
 "age":25 },
 {
 "id":2,
 "name": "Alice",
 "age":30 },
 {
 "id":3,
 "name": "Bob",
 "age":35 }
 ]
}

javascript// 使用 XMLHttpRequestconst xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
 if (xhr.status ===200) {
 const data = JSON.parse(xhr.responseText);
 // 渲染表格 renderTable(data.data);
 }
};
xhr.send();

// 使用 fetch APIfetch('data.json')
 .then(response => response.json())
 .then(data => {
 // 渲染表格 renderTable(data.data);
 })
 .catch(error => console.error(error));

javascriptfunction renderTable(data) {
 const table = document.createElement('table');
 const thead = document.createElement('thead');
 const tbody = document.createElement('tbody');

 // 定义表头 const headers = ['ID', 'Name', 'Age'];
 headers.forEach(header => {
 const th = document.createElement('th');
 th.textContent = header;
 thead.appendChild(th);
 });

 // 渲染表格数据 data.forEach(item => {
 const tr = document.createElement('tr');
 Object.keys(item).forEach(key => {
 const td = document.createElement('td');
 td.textContent = item[key];
 tr.appendChild(td);
 });
 tbody.appendChild(tr);
 });

 table.appendChild(thead);
 table.appendChild(tbody);

 // 将表格添加到页面中 document.body.appendChild(table);
}

javascriptfunction deletePreviousData() {
 const table = document.querySelector('table');
 if (table) {
 table.remove();
 }
}

javascriptfunction renderTableWithData() {
 deletePreviousData();
 fetch('data.json')
 .then(response => response.json())
 .then(data => {
 renderTable(data.data);
 })
 .catch(error => console.error(error));
}

renderTableWithData();