将 csv 的第一行移动到标题 HTML答案

【问题标题】：Moving first row of csv into header HTML将 csv 的第一行移动到标题 HTML
【发布时间】：2018-06-19 19:01:37
【问题描述】：

我使用 ajax 创建了一个表，但似乎无法将 <th> 元素包含在 <tr id="header"> 内。我试过appendTo、prependTo，但没有运气。

我想要的结构是：<Table><Thead><tr><th>，这样进入th 的数据将是#header 的子代，而不是兄弟姐妹

function arrayToTable(tableData) {
    var table = $('<table id = "data_table"></table>');
    $(tableData).each(function (i, rowData) {
        if (i==0){
            var row = $('<thead class= "table_header"><tr id="header"></tr></thead>');

            $(rowData).each(function (j, cellData) {
            $('#header').append($('<th>'+cellData+'</th>'));
        });
        table.append(row);
        } else{
            var row = $('<tr class="table_data"></tr>');
            $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
            });
        table.append(row);
        }
    });
    return table;
}

$.ajax({
    type: "GET",
    url: "random/folder/with/csvs/csv1.csv",
    success: function (data) {
        $('#container').append(arrayToTable(Papa.parse(data).data));
    }
});

【问题讨论】：

标签： javascript html csv parsing html-table

【解决方案1】：

试试这个代码

$(tableData).each(function (i, rowData) {
    if (i==0){
        var head = $('<thead class= "table_header"></thead>');
        var row = $('<tr id="header"></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<th>'+cellData+'</th>'));
        });
        head.append(row);
        table.append(head);
    } else{
        var row = $('<tr class="table_data"></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    }
});

【讨论】：