前言
使用JS读取数据并动态生成表格，但是发现在读取新一轮的数据时，新数据是在之前已经渲染的数据后面进行追加。因此需要解决的问题是：在读取新数据之前，把之前已经渲染的数据进行清空。
解决
1、首先写出表格的表头和主干
<!-- 表格 -->
<div class="table">
<table class="table-borderless">
<!-- 表头字段 -->
<thead>
<tr class="field">
<th>课程数量</th>
<th>课件数量</th>
<th>学习人数</th>
<th>学习人次</th>
<th>考试人数</th>
<th>考试人次</th>
</tr>
</thead>
<!-- 主干：表格的主要数据 -->
<tbody id="tbMain" class="tabledata">
</tbody>
</table>
</div>
2、读取数据并动态生成表格
writeData(); //调用函数
// 编写函数：动态生成表格并且读入数据
function writeData(){
// 获取表格的主干节点
var tbody = document.getElementById("tbMain");
// 读取数据
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr"); //创建行
for (var j = 0; j <= 5; j++){ //j是表格内容的列数，比如此处是6列
var cell = document.createElement("td"); //i行j列的元素
cell.innerHTML = data[i][j]
row.appendChild(cell); //加入行 ，下面类似
}
var trow=row;
tbody.appendChild(trow);
}
}
但是仅仅这么写的话，后续重新读取的数据会在先前读取的数据基础上进行追加渲染，因此应该先删除之前已经渲染的数据，然后再读取新一轮的数据。
3、改进：读取新数据前进行节点删除
- 改进思路：
应该在读取新一轮数据之前，对原先已经渲染的数据进行删除 - 代码思路：
判断表格主体部分是否有子节点，如果有就进行删除，直到没有任何子节点说明之前渲染的数据已全部清空
// 如果此时有数据，应该先删除，然后再读取对应专区的数据
var child=tbody.lastElementChild;
while(child){
tbody.removeChild(child);
child=tbody.lastElementChild;
}
// 至此已经清空了表格所有数据
完整代码
以下是读取数据并动态生成表格的代码，在读取新数据时，已经删除之前渲染出来的数据，避免多轮数据进行追加的现象：
writeData(); //调用函数
// 编写函数：动态生成表格并且读入数据
function writeData(){
// 获取表格的主干节点
var tbody = document.getElementById("tbMain");
// 如果此时有数据，应该先删除，然后再读取对应专区的数据
var child=tbody.lastElementChild;
while(child){
tbody.removeChild(child);
child=tbody.lastElementChild;
}
// 至此已经清空了表格所有数据
// 读取数据
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr"); //创建行
for (var j = 0; j <= 5; j++){ //j是表格内容的列数，比如此处是6列
var cell = document.createElement("td"); //i行j列的元素
cell.innerHTML = data[i][j]
row.appendChild(cell); //加入行 ，下面类似
}
var trow=row;
tbody.appendChild(trow);
}
}
