如何從 csv 文件讀取和顯示數據到 html 網頁？

Question

我是 html 編碼的新手。 我想讀取我的 csv 文件數據並將其顯示到網頁上。 csv文件每一行的數據必須在網頁上單獨顯示。 我當前的代碼沒有顯示任何內容，我也不知道為什么它不能正常工作。 請在這方面幫助我。 我的代碼如下：

    <!DOCTYPE html>
<html>
<script type="text/javascript">
    var allText =[];
    var allTextLines = [];
    var Lines = [];

    var txtFile = new XMLHttpRequest();
    txtFile.open("GET", "D:\PycharmProjects\filename.csv", true);
    txtFile.onreadystatechange = function()
    {
        allText = txtFile.responseText;
        allTextLines = allText.split(/\r\n|\n/);
    };

    document.write(allTextLines);<br>
    document.write(allText);<br>
    document.write(txtFile);<br>
</script>

Answer 1

您可以使用以下 javascript 從 csv 文件中讀取和顯示數據

<script type="text/javascript">
$.get('/file-path/demo.csv', function(data) {
var build = '<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="100%">\n';
var head = data.split("\n");
for(var i=0;i<1;i++){
build += "<tr><th>" + head[i] + "</th></tr>";
for(var i=1;i<head.length;i++){
build += "<tr><td>" + head[i].split("\n") + "</td></tr>";
}
}
build += "</table>";
$('#wrap').append(build);
});
</script>

Answer 2

加載文檔后，您可以迭代allTextLines數組

var txtFile = new XMLHttpRequest();
txtFile.onload = function() {
    allText = txtFile.responseText;
    allTextLines = allText.split(/\r\n|\n/);

    for(var i = 0; i < allTextLines.length; i++) {
        document.body.innerHTML += allTextLines[i];
        document.body.innerHTML += '<br/>';
    }
}

txtFile.open("get", "filename.csv", true);
txtFile.send();

filename.csv應該放在你的服務器靜態資源中的位置

如何從 csv 文件讀取和顯示數據到 html 網頁？

問題描述

2 個解決方案

解決方案1
1 2017-06-22 12:01:09

解決方案2
-1 2017-01-13 15:13:22

如何從 csv 文件讀取和顯示數據到 html 網頁？

問題描述

2 個解決方案

解決方案1 1 2017-06-22 12:01:09

解決方案2 -1 2017-01-13 15:13:22

解決方案1
1 2017-06-22 12:01:09

解決方案2
-1 2017-01-13 15:13:22