从某个位置读取csv文件并显示为html表

Question

从某个位置读取csv文件并显示为html表

ddp*_*dpd 3 html javascript csv json html-table

有没有办法让HTML页面从特定目的地读取csv文件并将其显示为网页中的HTML表格？

我正在开发一个网页来显示登录用户的状态.因此,HTML页面必须自动读取csv文件并相应地显示在网页中,因为csv文件将定期更新.

编辑:

根据答案的建议添加了代码,但浏览器中没有弹出任何内容

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSV Downloader</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "C:\Users\tim tom\Desktop\csvTOhtml\data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Joh*_*ers 11

三步过程

您需要三个步骤:

1)使用Ajax从服务器获取数据并将其转换为数组.你可以这样做,例如.使用以下jQuery:

$.ajax({
    type: "GET",
    url: "data.csv",
    success: CSVToHTMLTable
});

Run Code Online (Sandbox Code Playgroud)

2)获得CSV文件后,需要解析它.一个简单而可靠的方法是使用像Papa Parse这样的库:

var data = Papa.parse(data).data;

Run Code Online (Sandbox Code Playgroud)

3)您需要定义一个函数将数组转换为HTML表.以下是使用jQuery执行此操作的方法:

function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

Run Code Online (Sandbox Code Playgroud)

将所有东西放在一起

以下是将所有内容组合在一起的方法:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "http://localhost/test/data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，1 月前
查看次数：	27940 次
最近记录：	10 年，1 月前