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

前言

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