web-dev-qa-db-ja.com

場所からcsvファイルを読み取り、htmlテーブルとして表示します

HTMLページで特定の宛先からcsvファイルを読み取り、それをWebページにHTMLテーブルとして表示する方法はありますか？

ログインしているユーザーのステータスを表示するWebページを開発しています。したがって、csvファイルは定期的に更新されるため、HTMLページは自動的にcsvファイルを読み取り、それに応じてWebページに表示する必要があります。

編集：

回答からの提案に従ってコードを追加しましたが、ブラウザに何もポップアップしません

<!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>
javascripthtmljsoncsvhtml-table
4
ddpd

3ステップのプロセス

3つのステップが必要です：

1）Ajax を使用してデータをフェッチしますサーバーから、それを配列に変換します。あなたはこれを行うことができます例えば。次のjQueryを使用します。

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

2）CSVファイルを取得したら、それを解析する必要があります。それを行う簡単で信頼できる方法は、 Papa Parse ：のようなライブラリを使用することです。

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

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

すべてをまとめる

すべてをまとめる方法は次のとおりです。

<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>
12
John Slegers