JavaScript删除最后一个孩子在动态生成tr td

Question

我有一个javascript写的函数，用户上传excel文件后显示数据记录。

这里是我的HTML

<table id="result" class="table table-striped table-responsive"></table> 

和我的Javascript从Excel中

显示上传的数据

// draw HTML table based on sheet data 
    var sheet = parseCSV.getSheet(); 
    var table = document.getElementById('result'); 
    var btnSave = document.getElementById('btnSave'); 
    table.innerHTML = ""; 
    var wrapper0 = $("#column0"); 
    var divMapping = document.getElementById('mapping'); 
    var rowArray = []; 
    var columnArray = []; 

    $('#table').show(); 

    sheet.forEach(function (el, i) { 

     var row = document.createElement('tr'); 
     var button = document.createElement('td'); 
     el.forEach(function (el, i) { 
      var cell = document.createElement('td'); 
      cell.innerHTML = el.value; 

      row.appendChild(cell); 

     }); 

     button.innerHTML = "<button class='btn btn-default'>View</button>"; 

     row.appendChild(button); 

     table.appendChild(row); 

    }); 

，这里是我得到的输出的屏幕截图。

我不知道为什么它会产生额外的<tr>在底部和headers。

Answer 1

对于从头部移除按钮，你可以简单地逃避循环按钮添加部分。

sheet.forEach(function (el, i) { 

       var row = document.createElement('tr'); 
       var button = document.createElement('td'); 
       el.forEach(function (el, i) { 
        var cell = document.createElement('td'); 
        cell.innerHTML = el.value; 

        row.appendChild(cell); 

       }); 
       if(i != 0){ 
       button.innerHTML = "<button class='btn btn- 
           default'>View</button>"; 

       row.appendChild(button); 
       } 

      table.appendChild(row); 

     }); 

Answer 2

sheet可能会返回一个额外的row有反复，

只需添加view按钮

if (row.children && row.children) 
{ 
    row.appendChild(button); 
} 

这将确保这个按钮的时候添加这个检查只能在其他细胞已经被推到了加已经有row了。

和标题上。

添加其他检查，以避免加重头

if (row.children && row.children && i) //check if i != 0 
{ 
    row.appendChild(button); 
}