从位置读取csv文件并显示为html表格 [英] read csv file from a location and display as html table
问题描述
有没有办法让HTML页面从特定目的地读取csv文件，并将其显示为网页中的HTML表格？
我是开发一个网页来显示登录用户的状态。因此，HTML页面必须自动读取csv文件并相应地显示在网页中，因为csv文件将定期更新。
编辑：
从答案，但没有在浏览器中弹出
<！doctype html>< html>< head> < meta charset =utf-8> < title> CSV下载程式< / 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>函数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）;}）;返回表; } $ .ajax（{type：GET，url：C：\Users\tim tom\Desktop\csvTOhtml\data.csv，success：function（data）{$（'body'）） .append（arrayToTable（Papa.parse（data）.data））;}}）;< / script>< / body>
您需要三个步骤：
<1> 使用 Ajax 从您的服务器获取数据并将其转换为数组。你可以这样做，例如。使用以下jQuery：
$。ajax（{
类型：GET，
url： data.csv，
成功：CSVToHTMLTable
}）;
2）获得CSV文件后，需要解析它。简单&可靠的方法是使用像 Papa Parse 这样的图书馆：
var data = Papa.parse（data）.data;
3）你需要定义一个函数来将你的数组转换为HTML表格。下面是你如何使用jQuery做到这一点：
function arrayToTable（tableData）{
var table = $（'< ;表>< /表>'）;
$（tableData）.each（function（i，rowData）{
var row = $（'< tr>< / tr>'）;
$（rowData）.each （函数（j，cellData）{
row.append（$（'< td>'+ cellData +'< / td>））;
}）;
table.append （row）;
}）;
返回表;
h3>
以下是将所有内容放在一起的方法：
< 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>
函数arrayToTable（tableData）{
var table = $（'< table>< / table>'）;
$（tableData）.each（function（i，rowData）{
var row = $（'< tr>< / tr>'）;
$（rowData）.each （函数（j，cellData）{
row.append（$（'< td>'+ cellData +'< / td>））;
}）;
table.append （row）;
}）;
返回表;
$ .ajax（{
类型：GET，
url：http：//localhost/test/data.csv，
$ success：function（data）{
$（'body'）。append（arrayToTable（Papa.parse（data）.data））;
}
}）;
< / script>
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?
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.
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>
Three step process
You need three steps :
1) Use Ajax to fetch data from your server and turn it into an array. You could do this eg. with the following 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 :
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 :
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>
这篇关于从位置读取csv文件并显示为html表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
