javascript删除动态生成tr td的最后一个孩子

Question

I have a function written in javascript that displays records of data once users upload excel file.

Here is my HTML

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

and my Javascript for displaying uploaded data from 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);

    });

and here is a screenshot of the output I am getting.

I don't know why it generates extra <tr> on the bottom and on the headers .

Answer 1

For removing button from header you can simply escape the button adding part in the loop.

    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 may be returning one extra row with iteration,

Just add this check before adding the view button

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

This will ensure that button is added only if other cells have been pushed to the row already.

and on the headers.

Add another check to avoid adding to headers

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