前言
使用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);}
}
