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

javascript删除动态生成tr td中的last-child

2 个答案: