javascript - 更新 HTML 表以具有标题 JS

Question

我已将 CSV 文件读入 HTML 表，结果如下所示：

<div id="myTable" style="-ms-overflow-x: auto;">
    <table>
        <tbody>
            <tr class="rownum-0">
                <td>Make</td>
                <td>Model</td>
                <td>Engine</td>
            </tr>
            <tr class="rownum-1">
                <td>Ford</td>
                <td>Escort</td>
                <td>Diesel</td>
            </tr>
        </tbody>
    </table>
</div>

但我需要将第一行作为标题读入。

我希望要么更改表格，以便 class="rownum-0" 的行成为标题，要么更改在 CSV 文件中读取的代码以读取第一行作为标题。

我曾经在 CSV 中读取的代码如下：

function table_load(){ 
    var urls = "http://mysite/Data/CarData.csv"
    $.ajax({
        type: "GET",
        url: urls,
        success: function (data) {
            $('#myTable').append(arrayToTable(Papa.parse(data).data));
            }
    }); 
}
function arrayToTable(tableData) {
    var myTable = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr class="rownum-' + [i] +'"></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        myTable.append(row);
    });
    return myTable;
}

任何指导将不胜感激，因为我在过去一周一直坚持这一点。

Answer 1

只需检查您生成的第一行<td></td>，这是简单的事情。

function arrayToTable(tableData) {
var myTable = $('<table></table>');
$(tableData).each(function (i, rowData) {
    var row = $('<tr class="rownum-' + [i] +'"></tr>');
    $(rowData).each(function (j, cellData) {
       // change here
       // add conditional statement here. 
       var cell = '<td>'+cellData+'</td>';
       if (i === 0) {
         cell = '<th>'+cellData+'</th>';
       }
        row.append($(cell));
    });
    myTable.append(row);
});
 return myTable;
}

Answer 2

您应该使用下面的代码，只需检查第一个数据并将其插入<th>到<tr>.

function arrayToTable(tableData) {
    var myTable = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        row = $('<tr class="rownum-' + i +'"></tr>');
        if(i == 0) {            
            $(rowData).each(function (j, cellData) {
                row.append($('<th>'+cellData+'</th>'));
            });
        } else {                 
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
        }
        myTable.append(row);
    });
    return myTable;
}