Javascript 从某个位置读取 csv 文件并显示为 html 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36104089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
read csv file from a location and display as html table
提问by ddpd
Is there any way to get an HTML page to read a csv file from a particular destination and display it as an HTML table in the web page?
有没有办法让 HTML 页面从特定目的地读取 csv 文件并将其显示为网页中的 HTML 表格？
I am developing a web page to display the status of users that are logged in. Therefore the HTML page has to automatically read the csv file and display it in a web page accordingly, since the csv file will be updated periodically.
我正在开发一个网页来显示登录用户的状态。因此 HTML 页面必须自动读取 csv 文件并相应地在网页中显示它，因为 csv 文件将定期更新。
Edit:
编辑：
Added the code as per suggestion from the answer, but nothing pops up in the browser
根据答案中的建议添加了代码，但浏览器中没有弹出任何内容
<!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> 回答by John Slegers
Three step process
三步流程
You need three steps :
你需要三个步骤：
1)Use Ajaxto fetch data from your server and turn it into an array. You could do this eg. with the following jQuery :
1)使用Ajax从您的服务器获取数据并将其转换为数组。你可以这样做，例如。使用以下 jQuery ：
$.ajax({
type: "GET",
url: "data.csv",
success: CSVToHTMLTable
});
2)Once you have get your CSV file, you need to parse it. An easy & reliable way to do it, would be to use a library like Papa Parse:
2)获得 CSV 文件后，您需要对其进行解析。一种简单可靠的方法是使用像Papa Parse这样的库：
var data = Papa.parse(data).data;
3)You need to define a function to transform your array into an HTML table. Here's how you could do this with jQuery :
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;
}
Putting everything together
把所有东西放在一起
Here's how you can put everything together :
以下是将所有内容组合在一起的方法：
<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>
