更新HTML表以获得标题JS

时间:2018-06-06 09:40:46

标签: javascript jquery html csv

我已将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;
}

任何指导都会非常感激,因为过去一周我一直坚持这一点。

2 个答案:

答案 0 :(得分:1)

只需检查生成unique_countries=df1['Country'].unique().tolist() for index, row in df2.iterrows(): if row['Country'] in unique_countries: print row.values //do operation 的第一行,这里就是简单的事情。

<td></td>

答案 1 :(得分:0)

您应该使用以下代码,只需检查第一个数据并将其插入<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;
}